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本 书 围绕 APICloud 平台 ， 人 全面、 系统 、 细 致 地 讲述 了 App 开发 的 相关 内 容 ， 涉 及 平台 工作 原理 、 
内 部 实现 机 制 和 应 用 开发 技巧 。 本 书 涵盖 了 APICloud 应 用 开发 的 必 备 知识 , 包括 基础 知识 、 关 键 技术 、 
开发 技巧 和 行业 方案 ， 并 从 实践 角度 出 发 ， 通 过 大 量 的 实例 代码 、 详 细 的 操作 步骤 和 丰富 的 开发 截图 ， 
帮助 开发 者 迅速 掌握 APICloud 应 用 开发 ， 有 能 力 制 作出 好 的 App。 本 书 是 APICloud 开发 者 的 最 佳 入 
门 指南 ， 并 配 有 免费 的 讲解 视频 ， 适 合 各 种 层次 的 APICloud 学 习 者 和 开发 者 阅读 。 
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一 项 技术 价值 的 高 低 在 于 其 能 帮助 客户 弥补 多 大 的 技术 差距 。 移动 App 已 逐渐 成 为 企业 业 
务 的 基础 设施 ， 但 移动 开发 人 员 的 稀缺 ， 导 致 大 量 的 企业 无 法 组 建 自身 的 研发 队伍 。 雪 上 加 有 霜 
的 是 ， 移 动 App 距离 客户 更 近 了 ， 还 需要 更 快速 地 迭代 。APICloud 正 是 为 弥补 这 个 缺口 而 诞生 的 。 
尽管 APICloud 采用 HTML5 和 JavaScript 技术 降低 了 开发 难度 ， 但 仍 需要 开发 者 慢 慢 摸索 。 本 书 的 
出 版 解决 了 困扰 开发 者 的 问题 ， 进 一 步 弥 补 了 传统 企业 与 优秀 互联 网 公司 之 间 的 技术 差距 。 


一 一 林 路 ， 北 极光 创 投 合伙 人 















































































































































































































































































































































本 书 是 程序 员 写 给 程序 员 的 ， 其 中 充满 了 程序 员 的 风格 一 一 平实 、 纯 粹 ， 还 有 理性 的 乐观 。 
我 与 本 书 的 作者 从 各 自 创业 开始 ， 就 持 有 一 个 共同 的 理念 : App 开发 平台 〈 乃 至 操作 系统 ) 应 
支 高 效 、 开 放 、 跨 平台 、 功 能 丰富 。 本 书 是 这 一 理念 最 为 具体 的 说 明 ， 而 APICloud 和 中 科 创 达 




































































































































































































































































该 高 效 、 
这 两 家 公司 ， 也 是 该 理念 的 见证 者 。 我 会 将 本 书 推荐 给 我 的 同事 、 朋 友 、 合 作 伙伴 和 客户 阅读 。 
事实 上 ， 我 已 经 在 这 么 做 了 。 
































一 一 外 觅 程 ， 中 科 创 过 CTO 
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和 APICloud 的 小 伙伴 们 相识 好 几 年 了 ， 在 用 他 们 的 平台 做 各 种 智能 硬件 相关 的 App， 
岂 和 他 们 一 起 举办 过 面向 开发 者 的 社区 活动 。APICloud CEO 刘 和 多 在 用 户 体验 和 服务 上 对 细节 的 
无 限 追 求 ，APICloud CTO 分 达 在 技术 上 精湛 的 造 讶 ， 让 大 家 用 上 了 一 款 优秀 的 产品 。 早 就 觉得 
也 们 应 该 出 一 本 书 了 ， 所 以 这 次 收 到 样 书 一 点 也 不 意外 ， 更 是 几乎 一 气 呵 成 地 读 完 ， 感 觉 这 本 
书 应 该 叫 "30 天 App 开发 从 0 到 100”。 本 书 的 内 容 丰 富 翔 实 ， 包含 了 App 的 规划 、 开 发 、 调 试 、 
能 优化 、 上 架 等 方方面面 ， 还 有 数 个 不 同行 业 的 应 用 范例 。 无 论 是 App 开发 的 新 手 ， 还 是 “ 老 
鸟 ”"， 本 书 都 会 给 你 带 来 全 新 的 知识 和 视角 。 在 智能 设备 端 ， 跨 平台 App 已 经 成 为 一 个 不 可 道 的 
趋势 ， 而 APICloud 则 是 我 们 的 首选 ! 
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一 一 刘 正 ， 机 智 云 CTO 
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2 ”对 本 书 赞誉 





































































































这 是 一 本 面向 初学 者 但 同时 又 会 让 有 经 验 的 开发 者 快速 晋级 的 书 。 我 在 大 学 里 接触 最 多 的 
就 是 新 入 学 的 “初级 码 农 ” ， 通 过 本 书 可 以 让 他 们 迅速 成 长 为 可 以 交付 App 产品 的 开发 者 。 这 
种 学 习 体 验 ， 对 他 们 重新 理解 开发 的 含义 以 及 建立 对 IT 学 习 的 自信 心 都 有 极 大 帮助 。 另 外 ， 以 
App 实现 为 导向 的 面向 API 的 编程 方法 也 是 我 个 人 非常 推 尝 的 一 种 开发 趋势 。 
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梁 震 鲁 ， 齐 鲁 工业 大 学 网 络 信息 中 心 副 主任 ， 国 家 高 级 职业 指导 师 ，APICloud 社区 优 


















































































































































我 一 向 认为 一 本 计算 机 类 图 书 的 作者 ， 如 果 能 够 务实 地 站 在 App 设计 者 的 角度 去 思考 问题 ， 
深入 理解 问题 之 间 的 相互 关系 ， 并 且 会 针对 程序 员 经 常 遇 到 的 关键 知识 做 通俗 易 懂 的 阐述 和 不 
富 的 实例 验证 ， 那 么 他 给 记 过 者 带 来 的 不 仅 是 知识 ， 还 有 良好 的 程序 员 思 维 。 和 希望 本 书 的 读者 能 
够 从 中 领会 作者 的 良 苗 用 心 。 





































































































































































































































































































本 书 是 一 本 很 好 的 开发 入 门 教程 ,通俗 易 懂 、 由 浅 入 深 ， 并 提供 了 丰富 的 实际 案例 ， 详 名 
绍 了 如 何 使 用 前 端 开 发 语言 和 丰富 的 APICloud 平台 扩展 模块 来 跨 平 台 开 发 移动 App。 相 信 每 
位 读者 都 能 从 本 书 中 汲取 相应 的 知识 ， 它 也 将 帮助 我 们 的 开发 团队 更 好 地 开发 移动 App | 














































































































































































































了 丁 美 玲 ， 泛 亚 汽车 技术 中 心 高 级 主任 工程 师 






















































































APICloud 平台 以 独 有 的 快速 App 开发 方式 ， 将 移动 开发 中 的 软件 提升 到 一 个 新 的 高 
度 ， 可 以 帮助 企业 在 短期 内 打造 出 满足 业务 需求 的 App， 这 一 点 我 在 实际 使 有 切身 的 体会 。 
本 书 语言 平实 流畅 、 实 例 内 容 丰 富 ， 是 对 APICloud 生态 的 又 一 巨大 贡献 ， 也 是 我 们 移动 开发 人 
员 的 福音 。 读 读本 书 ， 相 信 你 一 定 会 喜欢 的 ! 

































































时 



























































































































































一 一 刘 殿 兴 博 证， 中信 证 券 信息 技术 中 心 高 级 副 总 裁 






































移动 互联 改变 了 人 们 的 生活 ， 更 给 企业 带 来 经 营 模式 的 转变 和 新 的 商机 。 在 这 一 过 程 中 移 
动 App 发 挥 了 重要 的 作用 。 但 是 ， 对 一 般 的 非 IT 企业 而 言 ， 高 效 建立 App 并 不 断 地 更 新 、 
持 运行 ， 会 使 企业 担负 很 高 的 成 本 。 直 到 兴 ， 我 偶然 发 现 APICloud， 它 让 我 非常 欣喜 
APICloud 是 中 国 领先 的 “云端 一 体 ” 移 动 应 用 云 服务 开发 平台 ， 能 够 满足 移动 创新 者 和 传统 企 
业 移 动 化 这 两 个 市 场 的 App 开发 需求 ， 并 可 以 为 开发 者 提供 高 效 App 开发 和 平台 管理 的 一 站 式 
服务 ， 包 括 开 发 、API 和 集成、 测试 、 渠 道 打 包 、 运 营 管理 的 App 全 生命 周期 等 。 它 已 有 数 以 万 
计 的 成 熟 开 发 接口 、 多 个 行业 的 应 用 模板 以 及 一 些 优秀 开发 者 提供 的 快捷 功能 组 件 。APICloud 
已 经 服务 于 很 多 行业 的 企业 客户 ， 并 为 客户 带 来 省 心 、 安 心 的 App 定制 开发 服务 。 如 果 你 还 在 
为 企业 的 App 开发 而 烦恼 ， 那 就 试 试 APICloud 吧 ， 一 定 会 让 你 取得 事半功倍 的 效 


























































































































































































































































































































































































































































































































































































































司 伊 丽 ， 光 大 银行 电子 银行 部 副 总 经 理 
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APICloud 平台 是 目前 开发 App 最 高 效 的 平台 之 一 ， 本 书 详尽 地 讲述 了 如 何 通 过 APICloud 
平台 快速 开发 一 款 优质 的 App， 里 面 有 大 量 的 图 文案 例 并 配合 实战 讲解 ， 通 俗 易 懂 ， 容 易 上 手 ， 
非常 适合 初学 者 学 习 。 

一 一 朱 亮 ， 春 秋 航 空运 营 总 监 

作为 最 早 一 批 APICloud 的 使 用 者 ， 还 记得 当初 相识 的 关键 字 “30 天 从 0 到 1”， 这 句 话 
没有 吹牛， 我 们 用 APICloud 很 快 就 完成 了 “ 战 旗 ” 的 开发 ， 并 且 经 受 住 了 百 万 日 活用 户 的 挑 
战 。 我 已 经 好 久 不 写 代 码 了 ， 翻 阅 本 书 发 现 许多 当初 期 望 的 功能 都 被 逐一 实现 ， 只 能 感慨 现在 
的 APICloud 用 户 太 幸福 了 。 请 记 住 ， 当 你 有 想法 时 ， 一 定 要 用 APICloud 启 航 。 

潘 长 伯 ， 全 民 直 播 CEO 
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jy 


可 能 很 多 人 不 知道 ， 规 模 大 的 企业 和 IT 预算 多 的 企业 的 移动 App 大 部 分 都 是 
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很 多 做 App 
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基于 HTML5 技术 开发 
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其 实 市 场 上 主流 的 App， 
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功能 以 外 ,包括 公众 号 、 小 程 ) 
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模式 开发 技术 使 其 商品 展示 及 线 
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5 外， 在 航空 、 
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接 的 联系 。 以 



































同时 ， 也 是 混合 模式 App 开发 技术 


速度 的 要 求 
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联网 化 的 支撑 ? ” 竺 案 其 实 和 企业 的 互联 网 化 及 数字 化 
要 混合 模式 App 
# 成 不 同行 业 解 决 方案 的 根本 优势 和 企业 选择 的 必要 性 所 在 。 





发 资产， 还 要 选 扫 
的 
发 技术 ， 
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“ 试 错 ” 这 个 词 不 但 在 互联 网 公司 中 广 为 流 传 ， 在 传统 公司 的 互联 网 化 过 程 中 也 被 广泛 接受 。 
越 来 越 多 的 CIO 在 谈 各 自 企 业 移 动 战 略 的 时 候 ， 都 会 提 到 “能 否 根据 业务 部 门 的 一 个 想法 ， 
先 在 一 周 之 内 做 个 原型 ， 快 速 实现 ， 拿 出 去 让 大 家 看 看 ， 然 后 基于 这 个 原型 再 修改 "。 这 种 快速 



































序 2 














发 起 、 快 速 验证 、 快 速 调 整 的 方法 ， 已 经 非常 流行 。 之 所 以 要 在 短 时 间 内 先 把 业务 从 想法 落 到 
闫 ， 哪 怕 App 粗糙 些 ， 也 要 先 实现 出 来 ,原因 在 于 具有 鲜明 企业 个 性 的 业务 的 创新 想法 可 能 
先例 可 循 ， 很 难 考虑 得 特别 完整 。 与 其 花费 三 五 个 月 不 停 地 思考 业务 需求 ， 还 不 如 网 
星期 先 把 基础 的 想法 落实 。 哪 怕 短 时 间 内 做 出 的 App 并 不 能 真正 满足 业务 的 需要 ， 但 是 可 以 
让 业务 人 员 的 想法 在 这 个 过 程 中 变 得 有 据 可 依 、 有 的 放 矢 ， 从 而 为 实现 更 完整 且 更 切实 可 行 的 
业务 方案 先行 探索 。 





































































































































































































































































































































































































“业务 部 门 的 一 个 想法 ，IT 部 门 一 两 周 就 做 出 来 了 ! ”这 对 于 企业 的 信息 化 负责 人 而 言 ， 
是 很 重要 的 褒奖 。 这 种 对 速度 的 要 求 ， 恰 恰 是 混合 模式 开发 技术 最 明显 的 特长 和 优势 ， 一 套 代 
码 可 同步 生成 iOS 与 Android 两 个 平台 的 App， 其 至 还 能 部 分 兼容 微 信 公 众 号 和 小 程序 。 
码 ， 并 不 代表 偷懒 或 工程 技术 的 简化 ， 而 更 多 的 是 因 其 不 仅 节省 了 代码 编写 的 时 间 ， 还 避免 J 
多 个 技术 团队 之 间 跨 知识 结构 的 协同 问题 ， 不 再 需要 iOS 与 Android 工程 师 们 开会 讨论 差异 性 
问题 ， 更 是 大 幅 节 和 省 了 App 与 服务 器 端 联机 调试 的 时 间 成 本 。 但 如 果 同 样 的 功能 ， 同 样 从 零 
始 ， 使 用 传统 的 原生 开发 技术 基本 没有 办 法 在 一 两 个 星期 内 完成 有 价值 业务 需求 的 实现 ， 因 为 
这 个 时 间 可 能 连 不 同 终端 碎片 化 和 差异 化 的 问题 都 不 足以 解决 。 所 以 ，CIO 为 了 满足 业务 发 展 
的 需求 和 数字 化 速度 的 要 求 ， 在 移动 战略 中 往往 都 会 规划 使 用 跨 平台 的 混合 模式 App 开发 技术 。 
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在 PC 时 代 的 B/S 架构 中 ， 想 要 实现 IT 系统 的 更 新 并 不 需要 过 多 地 考虑 用 户 端 的 影响 。 基 
为 作为 用 户 入 口 的 浏览 器 一 直 处 于 访问 网 络 的 状态 ， 只 要 网 络 连通 ， 用 户 随 时 访问 网 站 都 会 获 
得 最 新 的 功能 和 业务 。 对 用 户 而 言 ， 并 不 真正 地 存在 版 本 的 概念 。 只 要 访问 服务 器 ， 服 务 器 的 
任何 更 新 都 可 以 随时 展示 到 用 户 界 面 上 上， 出现 使 用 问题 时 ， 往 往 只 需要 清空 一 次 浏览 器 Cookie 
基本 就 可 以 解决 。 




























































































































































































































































































































































































但 是 在 移动 时 代 ， 用 户 对 版 本 的 概念 变 得 越发 敏感 。 而 对 App 的 版 本 管理 也 成 了 CIO 头 
痛 的 问题 。 通 常 因为 软件 开发 商 能 力 的 制约 ， 或 者 一 些 无 法 避免 的 bug， 让 一 些 已 发 布 的 App 
变 得 难 用 甚至 会 月 演 。 此 外 ， 一些 临 时 的 市 场 活动 、 很 少 但 重要 的 功能 、 一 些 不 在 规划 内 的 
产品 需求 调整 等 情 都 会 直接 引出 同一 个 问题 “用 户 必 须 更 新 一 个 版 本 ， 重 新 下 载 安 装 ， 才 
能 满足 上 述 需 求 ”。 ' 看 似 日 常 的 版 本 发 布 和 用 户 更 新 ， 恰 恰 是 传统 企业 信息 化 过 程 中 面临 
的 全 新 问题 。 


















































































































































































































































































































































































































































能 否 像 传统 浏览 器 那样 ， 用 户 打开 的 永远 是 最 新 的 服务 和 功能 ? ”很 多 企业 的 CIO 问 出 
了 相同 的 问题 ， 于 是 大 量 的 、 不 合 规 的 软件 服务 商 和 IT 程序 员 想 出 了 一 个 “偷懒 ”的 模式 。 在 
App 中 岁入 一 些 WebView， 将 一 些 功能 采用 传统 网 页 的 模式 ， 访 问 服务 器 ， 动 态 获取 。 虽 然 表 
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本 上 解决 了 版 本 更 新 的 问题 ， 实 则 产生 了 大 量 体 验 很 差 的 App。 























企业 对 业务 灵活 性 的 要 求 ， 本 质 是 希望 像 微 信 小 程序 一 样 ， 可 以 随时 发 布 一 些 新 的 功能 ， 
随时 动态 增 改 一 些 功能 的 入 口 ， 让 用 户 任 意 使 用 ， 同 时 让 用 户 的 体验 更 好 。 这 种 对 业务 灵活 性 
的 需求 其 实 需要 像 小 程序 一 样 有 强大 的 混合 模式 App 开发 技术 来 支撑 。 从 而 达成 “ 增 量 更 新 ” 青 
默 更 新 ”“ 打 开 获 得 新 功能 和 新 体验 ”， 而 不 是 内 套 WebView， 用 网 页 模拟 App 的 方法 ， 以 较 差 
的 用 户 体验 的 代价 换取 业务 灵活 的 可 行 性 。 


































































































































































































































































































当然 ， 目 前 传统 模式 开发 的 App， 特 别 是 用 Android 开发 的 App 也 开始 部 分 支持 动态 更 新 。 
也 恰恰 说 明 ， 业 务 灵活 性 是 企业 互联 网 化 、 数 字 化 进程 的 刚 需 。 只 是 由 于 传统 技术 的 制约 以 
软件 开发 团队 或 者 服务 商 能 力 的 限制 ,真正 的 原生 动态 更 新 始终 没有 办 法 大 规模 进入 企业 ， 
现 商 用 。 这 也 让 企业 对 混合 模式 App 开发 技术 的 需求 更 为 迫切 ， 成 为 每 个 CIO 的 必 备 选项 。 



























































































































































































































































集中 管理 的 要 求 


业务 部 门 的 互联 网 化 意识 是 因为 互联 网 的 广泛 普及 被 带动 起 来 的 。 所 以 ， 传 统 的 由 IT 部 门 
主导 企业 信息 化 的 态势 发 生 了 微妙 的 变化 。 过 去 ， 都 是 由 IT 部 门 发 起 信息 化 需求 ， 但 现在 的 IT 
部 门 越 来 越 像 “ 服 务 部 门 ”。 因 为 业务 团队 在 不 停 地 发 起 各 种 各 样 “ 业 务 + 互联 网 ”的 信息 化 
需求 。 这 个 时 候 ， 很 多 传统 企业 的 IT 部 门 领导 ， 没 认识 到 自己 角色 的 转变 ， 如 果 还 存 有 拖延 、 
不 管 不 同 、 你 们 自己 搞 不 定 等 类 似 的 想法 ， 就 会 导致 当下 很 多 企业 的 信息 化 面临 的 “各 种 移动 
App 的 彻底 碎片 化 ”“ 各 个 业务 部 门 自己 找 软件 开发 商 实现 各 自 的 需求 ”等 问题 。 这 不 但 架空 了 
IT 部 门 的 信息 化 主导 地 位 ， 更 麻烦 的 是 ， 让 后 续 的 集中 管理 变 得 艰难 无 比 。 几 十 家 甚至 上 百 家 
不 同 标 准 的 服务 挫 杂 在 企业 的 核心 系统 中 ， 甚 至 有 些 业 务 部 门 为 了 快速 满足 自己 的 需求 而 脱离 
了 IT 部 门 主 导 的 传统 PC 核心 系统 ， 这 些 操作 都 是 非常 危险 的 。 


















































































































































































































































































































































































































































































































































































































































IT 部 门 在 被 业务 部 门 要 求 满足 业务 的 互联 网 化 需求 时 ， 往 往 发 现 心 有 余 而 力 不 足 。IT 部 门 
人 手 有 限 ， 实 在 没 办 法 逐一 满足 所 有 业务 部 门 的 移动 化 需求 。 如 果 不 管 ， 就 会 产生 前 面 所 提 到 
的 “技术 栈 、 开 发 商 ” 碎 片 化 的 下 这 个 时 候 ， 基 于 混合 模式 App 开发 技术 的 移动 应 用 平台 ， 
就 很 好 地 解决 了 这 二 者 之 间 的 矛盾 。 
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定 标准 ， 从 而 实现 “集中 管理 。 如 果 企 业 能 够 制 统一 的 混合 模式 App 开发 技术 和 
移动 平台 标准 ， 各 个 业务 部 门 就 可 以 独立 寻找 自己 的 软件 开发 商 ， 用 各 种 方法 满足 自己 的 移动 
业务 需求 。 平 台 的 一 致 性 可 以 带 来 标准 化 的 统一 。 这 其 中 包括 技术 标准 化 、 开 发 流程 标准 化 、 


代码 管理 标准 化 、 项 目 管理 标准 化 、 验 收 标 准 化 、 管 理 和 运营 标准 化 等 。 













































































































































































































































































































































































既 要 放 ， 也 要 抓 。 这 就 是 互联 网 时 代 企 业 信息 化 的 要 求 ， 更 是 IT 部 门 的 职责 。 混合 模式 


























望 成 为 实现 企业 移动 战略 的 利器 之 一 。 


App 开发 技术 ， 
信息 化 安全 的 要 求 





























企业 互联 网 化 带 来 的 最 根本 转变 就 是 ， 内 网 的 信息 化 变 成 了 外 网 的 互联 网 化 。 


传统 信息 化 
背景 下 的 企 












































业 互 联网 化 ， 则 


般 包 括 内 




















列 、 固 定 场所 、 固 定 网 络 环境 和 固定 的 设 















































Device，BYOD)。 如 果 用 企业 的 管理 软件 来 管理 员工 个 人 设备 ， 肯 定 
又 


大 部 分 的 MDM 最 终 草 草 收场 ， 只 是 管理 了 企业 自己 购买 的 一 些 移动 ; 


企业 移动 化 、 互 联网 


移动 设备 管 
的 企业 几 习 












































无 一 例外 地 发 现 





























司 时 包括 外 网 、 随 时 、 随 地 、 员 工 个 人 设备 、 























词 。 这 些 不 起 眼 的 变化 ， 给 企业 的 业务 带 来 的 却 是 天 翻 地 履 的 调整 。 





























其 很 难 推进 。 因 为 MDM 伴随 




















































































































































































































备 。 























化 的 安全 怎么 保障 ? 这 要 满足 3 个 层面 的 安全 ， 即 设 











全- 


等 关键 词 。 而 移动 战略 
4G 和 Wi-Fi 等 关键 





里 软件 (Mobile Devices Management，MDML) 又 靡 一 时 ， 但 是 购买 了 MDM 
册 带 设 备 (Bring Your Own 
会 有 很 多 人 反对 。 所 以 ， 











EE、 传 统 安 























混合 模式 App 开发 技术 


























授权 模式 ， 能 够 支持 特定 设 

















、 特 定 的 人 ， 也 可 以 选择 不 同 的 子 应 
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APICloud 作 
混合 技术 在 国内 的 发 展 和 应 



































[ 作 内 容 的 调整 ， 根 据 设 备 编码 和 用 户 权限 来 实时 分 配 全 新 子 应 





















































的 功能 。 























战略 支撑 的 关键 。 









































































































































为 中 国 主流 



































可 以 实现 类 似 于 企业 应 用 商店 (如 微 信 公 众 号 ) 的 动态 权限 绑 定 和 
。 此 外 ， 还 可 以 实现 随 着 





























这 种 基于 企业 移动 应 用 商店 的 “ 子 应 用 ”模式 ， 也 是 混合 模式 App 开发 技术 成 为 企业 移动 
因为 做 得 好 的 企业 应 用 商店 ， 不 仅 能 够 满足 传统 原生 模式 开发 的 App 所 不 能 
赋予 企业 的 、 对 各 种 安全 性 的 需求 ， 还 实现 了 对 业务 灵活 性 的 管理 目的 。 

















的 混合 模式 App 开发 技术 服务 提供 商 ， 




















在 以 布道 




















的 身份 推 ; 
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的 商 、 






































。 我 们 不 仅 提 供 技术 ， 也 提供 商业 服务 ， 

















此 会 更 多 ] 


弛 深入 到 大 量 
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如 海尔 、 

















秋 航 空 、 英 特 尔 、 中 信 证 券 、 上 汽 等 。 我 

















场景 和 实际 的 商业 客户 需求 ， 



































门 的 团队 结合 不 同 的 商业 









































编写 了 本 书 ， 和 希望 能 够 为 不 同 规模 的 企 、 








在 移动 信息 


























和 互联 网 化 



































进程 


提供 有 价值 











的 参考 ， 同 











时 也 能 够 让 从 事 App 开发 的 技术 人 员 在 
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可 借鉴 的 实战 经 验 。 









































刘 筠 
APICloud 创始 人 兼 CEO 
2018 年 3 硅谷 




















-一 
月 辣 


























时 光 荃 萌 ， 转 眼 间 APICloud 上 线 已 经 有 3 年 多 的 时 间 了 ， 在 这 3 年 多 的 时 间 里 ，APICloud 
凭借 自身 的 技术 优势 和 坚持 做 好 开发 者 生态 的 信念 已 经 聚集 了 众多 的 APICloud 开发 者 。 多 年 























































































































































































































































































































































































































































































































发 者 的 经 历 让 我 们 理解 开发 者 ， 也 深刻 认识 到 任何 一 个 平台 或 技术 都 不 是 三 言 两 语 能 说 清楚 的 ， 
要 想 让 开发 者 快速 掌握 APICloud 应 发 、 少 走 弯路 ， 我 们 需要 编写 出 全 面 、 系 统 、 细 致 
的 开发 指南 。 这 个 想法 一 直 都 有 ， 但 是 随 着 平台 完善 、 引 擎 优化 、API 扩展 和 生态 产品 研发 等 工 
作 的 开展 ， 开 发 指南 的 编写 工作 述 述 未 能 完成 。 这 里 也 向 广大 开发 者 表达 车 意 。 

自从 2014 年 9 月 15 日 APICloud 平台 上 线 人 以来，APICloud 开发 团队 坚持 每 周 更 新 




































































央 速 迭代 ，3 年 多 时 间 从 未 间断 。 现 在 APICloud 平台 稳定 ， 功 能 齐全 ， 生 态 繁荣 ， 社 
Wey 发 者 越 来 越 多 ， 要 写 出 好 App 的 需求 也 越 来 越 迫切 ， 这 些 让 我 们 感到 兴奋 的 同时 
也 备 感 压力 。 我 们 必须 把 自己 的 设计 思想 、 意 图 和 经 验 写 出 来 ， 以 满足 开发 者 对 技术 的 热情 和 


渴望 ， 节 省 开发 者 宝贵 的 学 习 时 间 ， 同 时 也 能 指导 开发 




















































































































































































































二 | 


结 作 出 优秀 的 App。 









































APICloud 是 一 个 功能 强大 的 开发 平台 ,涉及 的 技术 范围 很 广 ， 虽 人 然 是 自己 亲手 设计 的 产 
品 ， 也 非常 清楚 开发 者 需要 获知 的 核心 知识 ， 但 是 ， 想 要 把 书写 好 也 并 非 易 事 。 作 为 官方 出 
的 第 一 本 介绍 APICloud 的 书 ， 如 何 合 理 安排 内 容 ， 如 何 能 够 由 浅 入 深 、 循 序 渐进 地 展开 ， 如 
才能 最 快 地 帮 到 开发 者 ， 这 些 都 让 我 们 反复 思考 , 一遍 遍地 梳理 备 个 知识 点 之 间 的 关联 。 宣 
的 编排 确实 让 我 们 很 费 脑 筋 ， 这 也 许 就 是 理想 与 现实 之 间 的 差距 吧 。 本 书 的 作者 都 是 APICloud 
线 开发 工程 师 ， 均 为 纯粹 的 程序 员 出 身 ， 编 码 水 平 稍 有 自信 ， 但 是 文学 情调 基本 为 零 。 在 本 
$ 中 ， 我 们 力求 用 通俗 的 语言 来 讲述 原理 和 机 制 ， 用 简 洗 平实 的 语言 来 描述 使 用 流程 。 但 是 ， 
本 书 内 容 编 排 上 可 能 还 存在 不 足 ， 用 词 可 能 还 不 够 准确 ,文笔 可 能 还 不 那么 优雅 和 流畅 ， 这 些 
还 请 广大 读者 谅解 。 
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APICloud 以 新 的 思想 、 新 的 技术 、 新 的 模式 和 新 的 工具 来 加 速 移动 应 用 开发 ， 并 且 让 广大 
的 Web 开 发 人 员 能 够 快速 成 为 App 开发 专家 。 在 本 书 中 ， 我 们 会 尽 可 能 地 通过 详细 的 操作 步骤 、 
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平实 的 语言 、 大 量 的 实例 代码 和 丰富 的 插图 来 讲 清楚 每 一 个 知识 点 ， 并 且 给 出 大 量 的 开发 技巧 
以 适应 不 同 的 场景 ， 迅 速 提 高 开发 者 水 平 。 除 了 介绍 应 用 层 开 发 外 ， 我 们 还 通过 增加 对 原理 的 
剖析 ， 让 开发 者 了 解 平台 的 内 部 工作 机 制 ， 理 解 APICloud App 设计 的 原理 ， 从 而 掌握 APICloud 
的 App 开发 方式 和 设计 原则 。 















































































































































































































































APICloud 团队 是 国内 较 早 进行 Web 与 Native 技术 融合 的 实践 者 ，10 多 年 来 见证 了 混合 
发 技术 在 国内 “悄悄 地 、 慢 慢 地 ” 火 起 来 的 全 过 程 。APICloud 拥有 行业 领先 的 高 性 能 App 混合 
泻 染 引擎 ，APICloud 模块 Store 汇集 了 目前 App 开发 需要 使 用 的 几乎 所 有 主流 AP 
持续 更 新 。 我 们 希望 能 把 一 切 好 的 功能 加 入 到 APICloud 平台 ， 目 的 就 是 能 真正 帮助 开发 者 提高 
效率 ， 降 低 成 本 ， 解 决 问题 。 
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访问 APICloud 平台 官网 ， 注 册 成 为 APICloud 开发 者 ， 开 始 APICloud 的 开发 之 旅 吧 ! 























如 何 阅 读本 书 


本 书 分 3 个 部 分 ， 一 共 包 括 16 章 和 2 个 附录 。 

































































第 一 部 分 是 基础 教程 ， 适 合 APICloud 初学 者 。 通 过 第 一 部 分 的 学 习 初 学 者 可 以 了 解 
APICloud 平台， 熟悉 APICloud 云 探 发 当 。 






























































央 台 操作 和 开发 工具 的 使 用 ， 掌 握 开 发 一 款 App 必须 具备 
的 核心 知识 点 、 常 用 API 和 基础 开发 技巧 ， 可 以 有 能 力 独自 完成 一 款 简 单 App 的 开发 。 读 
学 习 过 程 中 可 以 跟随 示例 代码 一 步 步 自己 练习 ， 再 结合 视频 讲解 学 习 APICloud 应 用 的 设计 思 
想 ， 理 解 APICloud 开发 模式 ， 从 而 找到 理解 APICloud App 开发 的 正确 方法 和 学 习 模 式 ， 为 上 
后 有 能 力 开发 大 型 的 复杂 Apb 打下 基础 。 



















































































































































































































































































































































































这 一 部 分 以 一 款 实际 案例 的 开发 过 程 为 例 ， 所 涉及 的 核心 知识 和 编码 技巧 是 开发 一 款 优 
APICloud App 的 必 备 技能 ， 初 学 者 一 定 要 深刻 掌握 。 有 一 定 APICloud 开发 经 验 的 读者 也 可 以 
通过 这 一 部 分 的 学 习 ， 加 深 对 APICloud 应 用 设计 思想 和 开发 模式 的 理解 ， 对 APICloud 知识 体 
系 有 一 个 更 全 面 的 认识 ， 巩 固 APICloud 核心 知识 点 的 使 用 。 
























































































































































































































































这 一 部 分 共 7 章 。 第 1 章 是 一 个 非常 全 面 的 初学 者 入 门 教程 ， 对 APICloud 平台 、APICloud 
App 开发 流程 、 学 习 方 法 、 学 习 资源 做 了 全 面 的 介绍 。 第 2 ~ 7 章 详细 讲解 如 何 从 零 起 点 开发 
一 球 App， 以 一 个 电 商 O2O App 为 例 ， 从 创建 App 开始 ， 一 步 步 为 其 丰富 功能 ， 直 到 开发 出 
款 完整 的 App。 在 这 个 过 程 中 演示 了 一 个 APICloud App 开发 的 标准 流程 ， 贯 穿 讲 解 了 APICloud 
App 开发 过 程 中 需要 使 用 的 所 有 核心 知识 点 ， 包 括 界 面 布局 、 网 络 通信 、 数 据 存储 、 模 块 扩展 
和 开放 服务 调用 等 。 
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行 了 重庆 





梳理 





了 























夯 乡 











I 阐述 更 加 














致 、 语 言 描述 


述 更 











7? 











[0 结 





























义 和 视 频 讲 解 整理 





课 ” 的 课程 
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第 三 部 分 是 行业 应 用 ， 
实力 的 企业 越 需 
* 势 和 企业 选择 的 了 
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附录 A 为 APICloud App 客户 端 
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付 录 B 为 开发 
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配套 视频 























本 书 配套 免费 的 “APICloud 7 天 培训 课 ” 的 完整 视频 教程 ( 共 约 70 讲 )。 “APICloud 7 天 
培训 课 ” 第 1 ~ 7 天 的 视频 讲解 与 本 书 第 一 部 分 第 1 ~ 7 章 的 内 容 是 相互 关联 的 ， 读 者 可 以 通 
过 扫描 二 维 码 来 观看 这 一 视频 教程 。 














(第 13 ~ 16 章 )， 
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主要 总 结 提升 程序 质 
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lla 
小 


示例 代码 


本 书 的 项 目 源码 和 资源 都 放 在 GitHub 仓库 ”里 。 我 们 后 续 也 会 通过 这 个 开源 分 支 来 更 新 代 
码 和 教程 ， 解 决 读者 所 提出 的 问题 ， 并 进行 后 续 版 本 的 适 配 和 代码 的 优化 。 




















































































































开发 环境 


APICloud 坚持 支持 多 开发 工具 的 策略 ， 发 者 可 以 使 用 任意 一 款 自 己 喜 欢 的 主流 编 
码 工具 来 开发 APICloud App， 只 需要 在 这 些 工 具 中 安装 相应 的 APICloud 插件 就 可 以 了 。 目 部 
APICloud 支持 的 开发 包括 Atom、Sublime Text、Eclipse、WebStorm、VSCode 等 。 本 书 通 


一 -一 


APICloud Studio 2 作为 开发 工具 ，APICloud Studio 2 是 一 款 基 于 Atom 进行 扩展 的 全 功 


能 集成 开发 工具 。 读 者 可 以 阅读 附录 也 来 了 解 这 款 工 具 的 详细 使 用 方法 。 
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联系 我 们 






































































































































于 编写 时 间 仓 促 ， 书 中 难免 会 出 现 一 些 错误 或 者 不 准确 的 地 方 ， 奶 请 读者 批评 指正 。 如 
您 有 更 多 的 宝贵 意见 ， 欢 迎 到 APICloud 开发 者 社区 @ 和 我 们 进行 互动 和 讨论 。 



































分 达 
APICloud 联合 创始 人 兼 CTO 























2018 年 3 月 21 


























GD ”GitHub 搜索 框 内 输入 “apicloud 30— APP- -0 1” 即 可 。 
@) 在 APICloud 官方 网 站 点 击 “ 开 发 者 社区 ” 即 可 
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资源 与 支持 


本 书 由 异步 社区 出 品 ， 社 区 (https://www.epubit.com/〉 为 您 提供 相关 资源 和 后 续 服 务 。 














配套 资源 














本 书 提 供 如 下 资源 : 
@ 本 书 源 代 码 ; 


@ 配套 视频 。 
要 获得 以 上 配套 资源 ， 请 在 异步 社区 本 书页 面 中 点 击 甘 天 , 跳 转 到 下 载 界面 ， 按 提 


示 进 行 操作 即 可 《本 书 视频 为 扫 码 观看 )。 注 意 : 为 保证 购书 读者 的 权益 ， 该 操作 会 给 出 相 
关 提示 ， 要 求 输入 提取 码 进行 验证 。 
























































提交 勘误 


作者 和 编辑 尽 最 大 努力 来 确保 书 中 内 容 的 准确 性 ,但 难免 会 存在 玻 漏 。 欢 迎 您 将 发 现 的 
问题 反馈 给 我 们 ， 帮 助 我 们 提升 图 书 的 质量 。 

当 您 发 现 错误 时 ， 请 登录 异步 社区 ， 按 书 名 搜索 ， 进 入 本 书页 面 ， 点 击 “ 提 交 勘 误 ”， 
输入 勘误 信息 ， 单 击 “ 提 交 ” 按 钮 即 可 。 本 书 的 作者 和 编辑 会 对 您 提交 的 勘误 进行 审核 ， 
确认 并 接受 后 ， 您 将 获 赠 异步 社区 的 100 积分 。 积 分 可 用 于 在 异步 社区 兑换 优惠 券 、 样 书 
或 奖品 。 











































































































写 书评 提交 勘误 


| 页 下位 置 (5 数 ) : | | sm 次 : | 


污 - 三 > 4 名 要 至 





扫 码 关注 本 书 











扫描 下 方 二 维 码 ， 您 将 会 在 异步 社区 微 信服 务 号 中 看 到 本 书信 息 及 相关 的 服务 提示 。 





与 我 们 联系 





我 们 的 联系 邮箱 是 contact@ epubit.com.cn。 





如 果 您 对 本 书 有 任何 疑问 或 建议 , 训 





4 您 发 邮件 给 我 们 , 并 请 在 邮 伯 























以 便 我 们 更 高 效 地 做 出 反馈 。 











F 标 题 中 注 明 本 书 书 名 ， 


























如 果 您 有 兴趣 出 版 图 书 、 录 制 教学 视频 ， 或 者 参与 图 书 翻译 、 技 术 审 校 等 工作 ， 可 以 











发 邮件 给 我 们 :有意 出 版 图 书 的 作者 也 可 以 到 异步 入 
www.epubit.com/selfpublish/submission 即 可 )。 





























如 果 您 是 学 校 、 培 训 机 构 或 企业 ， 想 批量 购买 本 书 或 异步 社区 出 


发 邮件 给 我 们 。 








如 果 您 在 网 上 发 现 有 针对 异步 社区 
































HK 


























关于 异步 社区 和 异步 图 书 




















分 内 容 的 非 授权 传播 ， 请 您 将 怀疑 有 侵权 行为 的 链接 发 邮件 给 我 们 
者 权益 的 保护 ， 也 是 我 们 持续 为 您 提供 有 价值 的 内 容 的 动力 之 源 。 

















:区 在 线 提交 投稿 (直接 访问 





版 的 其 他 图 书 ， 也 可 以 














8 品 图 书 的 各 种 形式 的 盗版 行为 , 包括 对 图 书 全 部 或 








。 您 的 这 一 举动 是 对 作 














“异步 社区 ”是 人 民 邮 电 出 版 社 旗下 IT 专业 图 书社 区 ， 致 力 于 出 版 精品 IT 技术 图 书 和 





相关 学 习 产 品 ， 为 作 译 者 提供 优质 出 版 服务 。 异 步 社 





















































区 创办 于 2015 年 8 月 ， 提 供 大 量 精品 








IT 技术 图 书 和 电子 书 ， 以 及 高 品质 技术 文章 和 视频 课程 。 更 多 详情 请 访问 异步 社区 官网 

















https://www.epubit.com.。 





























“异步 图 书 ” 是 由 异步 社区 编辑 团队 策划 出 版 的 精品 IT 专业 图 书 的 品牌 , 依托 于 人 民 邮 


























电 出 版 社 近 30 年 的 计算 机 图 书 出 版 积累 和 专业 编 
































民团 队 ， 相 关 图 书 在 封面 上 印 有 异步 图 书 

















的 LOG0。 异 步 图 书 的 出 版 领域 包括 软件 开发 、 大 数据 、Al、 测 试 、 前 端 、 网 络 技术 等 。 
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本 书 能 够 顺利 完成 ， 得 到 了 很 多 同事 和 朋友 的 帮助 。 



































感谢 人 民 邮 电 出 版 社 对 APICloud 平台 的 大 力 支持 。 




























































































感谢 人 民 邮 电 出 版 社 信息 技术 分 社 社 长 、 异 步 社 区 掌 门 人 刘涛 老师 在 2018 APICloud 开发 
者 大 会 上 现场 宣布 本 书 预 售 。 






















































































感谢 人 民 邮 电 出 版 社 杨 海 玲 老师 对 本 书 的 支持 。 我 们 和 海 玲 老 师 很 早 就 认识 ， 她 有 丰富 的 
到 书 策划 和 出 版 经 验 ， 这 次 能 与 她 合作 非常 开心 ， 合 作 过 程 也 很 愉快 。 感 谢 海 玲 老师 在 本 书 的 
编写 过 程 中 (从 内 容 组 织 到 最 终 成 稿 ) 给 予 的 悉心 指导 。 















































































































































感谢 我 们 的 同事 尚德 案 、 颜 彬 、 干 梦 吉 等 参与 了 本 书 第 二 部 分 实战 技巧 的 编写 。 





























感谢 广大 的 APICloud 开发 者 ， 正 是 与 你 们 的 交流 和 互动 造就 了 APICloud 社区 的 繁荣 ， 也 
是 你 们 的 需求 和 应 用 推动 着 APICloud 平台 的 不 断 完善 和 快速 迭代 。 

































































Day 
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感谢 所 有 参与 本 书 不 同 阶段 书稿 评审 和 代码 验证 的 人 。 















































感谢 Sean 和 May， 我 们 相识 多 年 ， 一 起 创业 ， 没 有 你 们 的 踪 胃 和 压迫 ， 我 很 难 按时 完成 本 


















































日 录 
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在 这 一 部 分 中 ， 第 1 章 将 对 APICloud 平台 做 一 个 整体 的 介绍 ， 包 括 平台 能 力 、 开 发 模式 、 和 党 

习 资 源 和 开发 者 社区 等 ， 之 后 会 介绍 如 何 使 用 APICloud 完成 一 个 最 简单 的 App 的 完整 开发 流程 。 
第 2 ~ 7 章 将 带领 读者 从 零 起 步 去 开发 一 款 O2O 类 型 的 电 商 App， 其 中 会 涉及 APICloud 
发 的 基础 理论 和 常用 技术 ， 帮 助 读者 快速 入 门 。 对 于 第 一 部 分 的 整体 内 容 ， 建 议 读者 结合 随 
书 附 赠 的 视频 教程 去 学 习 ， 理 解 课程 当中 讲 到 的 每 个 技术 细节 ， 人 然后 再 亲手 练习 。 学 会 这 些 内 
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就 有 能 力 去 独立 
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一 部 分 的 项 


代码 和 教程 ， 解 如 





款 App 了 。 























读者 所 提出 的 问题 ， 




















源码 和 所 有 资源 在 GitHub 库 0 里。 我 们 后 续 也 会 3 


We 
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进行 











GD  GitHub 搜 “apicloud30-APP-0-1”。 


续 版 本 的 适 配 和 代码 的 


多 化 。 








第 ] 章 
APICloud App 开发 流程 











主要 内 容 


本 章 从 总 体 上 介绍 APICloud 平台 ， 包 括 APICloud 应 用 的 开发 模式 、 设 计 思 想 、 控 制 台 使 
用 流程 等 ， 并 以 一 个 HelloWorld App 为 例 让 读者 体验 一 个 完整 的 APICloud App 的 开发 流程 。 


学 习 目 标 

(1) 了 解 APICloud 平台 ， 了 解 APICloud 相关 的 学 习 资 源 、 入 门 资料 和 常见 的 问题 。 让 没 
有 接触 过 APICloud 平台 的 读者 ， 对 平台 有 一 个 基础 的 了 解 ; 让 学 习 过 APICloud 并 且 已 掌握 一 
部 分 技能 的 读者 ， 通 过 本 章 的 学 习 ， 可 以 快速 找到 需要 的 资料 和 解决 问题 的 方法 。 

(2) 学 习 如 何在 APICloud 平台 上 创建 、 人 和 修改、 调试 、 编 译 和 运行 一 个 最 简单 的 APICloud 
App。 掌 握 APICloud App 完整 的 开发 流程 。 





















































要 对 APICloud 平台 做 一 个 全 面 的 介绍 ， 需 要 花 很 长 的 时 间 和 很 多 的 篇 幅 来 讲解 每 一 个 
节 ， 而 本 书 作者 希望 能 用 更 多 的 篇 幅 来 讲解 一 个 App 的 实际 开发 过 程 ， 讲 解 具体 的 代码 实现 。 
所 以 ， 本 章 在 介绍 APICloud 平台 的 时 候 ， 是 通过 抛 出 一 个 个 问题 ， 然 后 告诉 读者 应 该 到 哪儿 去 
找 对 应 的 学 习 资源 ， 到 哪儿 能 够 找到 解决 问题 的 方案 。 
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4 第 1 章 APICloud Apb 开发 流程 


1.1 APICloud 平台 介绍 


本 章 将 从 APICloud 可 以 做 什么 ， 如 何 获取 使 用 帮助 ，APICloud 的 技术 、 产 品 和 生态 等 多 
个 方面 对 APICloud 平台 加 以 介绍 。 



































1.1.1 查看 APICloud 平 侣 能 力 


发 者 在 接触 一 个 开发 平台 的 时 候 ， 通 常 第 一 个 想法 就 是 去 查看 这 个 平台 的 能 力 。 特 别 是 
那些 想 做 App 的 、 有 着 明确 需求 的 开发 者 ， 他 们 会 非常 关心 自己 的 需求 在 这 个 开发 平台 上 是 否 
能 够 满足 。 所 以 ， 本 书 开篇 就 先 来 解决 这 个 开发 者 普遍 关心 的 问题 ， 读 者 可 以 带 着 自己 预先 想 
好 的 需求 来 了 解 APICloud 平台 ， 了 解 如 何 能 够 快速 地 在 APICloud 平台 上 查找 相关 的 能 力 。 
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1. 通过 官方 文档 快速 搜索 功能 模块 
查看 APICloud 平台 提供 的 能 力 ， 一 个 最 基础 也 是 最 有 效 的 方法 就 是 查看 APICloud 的 API 文档 。 































































































APICloud 官方 网 站 中 的 文档 页 面 如 图 1-1 所 示 。 如 需要 查看 视频 播放 的 功能 ， 可 以 在 文档 
搜索 “视频 播放 ”， 搜 索 结 果 如 图 1-2 所 示 ， 可 以 看 到 在 APICloud 平台 上 有 多 种 提供 视频 所 
放 功 能 的 模块 ， 如 videoPlayer (播放 本 地 视频 ) 、moviePlayer (播放 网 络 视 频 ) 、polyvPlayer ( 保 
利 威 视 播放 器 ) 、baiduPlayer (百度 播放 器 ) 等 。 
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© APICloud APP 开 发 平台 。 APP 定制 服务 。 ”开发 者 社区 VIP 服务 家 例 


灾 Joader 膏 第 
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APp 开 发 平台 介 信 Apli 旬 Widget 全 寺内 这 明 
AP? 全 # 琶 务 刘 人 推荐 App 定 制 项 目 ， 三 项 好 礼 任 井 nm 充血 访 问 conng xml 实用 配置 训 明 
新 闻 开 发 指 靖 六 六 疾 kevy.xml 文 件 配 贸 说明 
僵 津 第 一 个 应 用 许诺 布 基 向 证 义 loader 说 由 
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1.1 APICloud 平台 介绍 5 
€ ”CO docsapicloud com/ Treorch 六 频 抽 记功 和 人 本 站 
© APICloud APP 开 发 平台 APP 定制 服务 开发 者 社区 VIP 了 服务 实例 [me ] | sm 
APICloud 
APP 开 发 平台 介绍 miniVR 
APP 定 休学 台 介 个 未 自 于 ; 开发 者 立即 使 用 openVideo 西关 minVR 实 骏 了 vi 用 支 讨 mpsiDm3v8 赂 式 ， 支 读本 地 和 http 届 履 、 太 小 有 有 不 旺 100KB。 支 背 
Androld5 1APIZX) 及 以 上 。 openVideo 跑 转 则 vr 视频 openVideo([parsms)j, coDackfedli params ui 燃 尖 :字符 帅 赔款 :心机 ) 项 筑 文 件 地 
新 手 开 发 冰 南 址 支持 ddcardJ/、tsy/ 和 http。 mode: 类 型 ， 教 字 着 进 ， 【可 选项 ) 描记 腊 式 ， 球 从 是 0，0 是 苦 通 杏 式 1 是 单 她 模 侈 2 是 双 殷 模式 。 calbackjyeg 
CY ret 类型 : JSON 对 象 内 部 字 隘 。 { code: -1 ,1.1 表示 兴致 .成 功 会 自动 功 儿 成 模 翼 属 改 msg 
全 再 第 一 个 应 用 
知 何 开 发 出 优秀 的 
APICIloud 应 用 
梳 后 使 用 膏 理 moviePlayer 
亲自 于 ”APICloud 立 同 使 用 Method open show ho ciose rmplny IaF iiscreon mpPloyng oddEventLstoner 可 过 movepPtunver 对 其 ESEISE3 (不 支 
模块 开发 特 寿 妾 娇 以 ) 。 玉 快 以 。 侠 冲 讽 填 播 做 位 置 等 捍 作 、 订 可 通过 竹 伏 设 因 许 舌 亮 度 和 入 嵌 声 厚 大 小 ， 沐 过 了 听 接 口 看 和 家 模 堪 上 的 各 种 竹 骸 洛 人 事件。 全 询 
专机 坑 时 梧 花 本 模块 当做 一 个 rame 成 加 在 window 威 frarne 上 。Android 衬 各 上 支持 的 的 规 灯 文件 檬 式 有 ; MP4、3gp; OS 平 侣 上 支持 的 视 灶 文件 述 
开发 机 块 设计 类 范 式 有 ;MOV，MP4，M4V， 本 模块 各 过 open 近 口 ， 厅 开 一 个 撞 质 放 册 蜡 看 ， 青 配合 frame 身 定 义 完 于 的 博 改 责 商 。 open 
悍 块 开发 天 南 _:0S 
覃 块 开发 病 南 
_Android_Studio playModule 
恒 块 开发 划 南 过 向 于 “天 曙 者 亿 轩 使 用 Method end py pinyUrl pauae start top QetDurntan getCunertPositon Nilunfull odE: ventl atener maFuaScreen soe fo 
-Android_Eclipse setVoWme hidePuayer showPiayer 把 术 playModue 计 民 了 SEE 天 (不 支持 音 短 交 的 ) 。 使 用 术 模 二 时 可 和 本 村 块 岂 所 一 个 ame 及 加 在 window 
模块 审核 奖 范 -105 总 rame 上 。Android 平公 上 支持 的 的 视 闪 文件 格式 有 ; MP4、3GP、FLV，、RTMP。、M3U8: 1DS 平 他 上 支 兰 的 视 冰 文件 覆 式 有 :; MOYV，MP4，M4V. 
FRV、ACC、3GP，RTMP、NM308 等 ; 使 用 有 和 Ui- 
仆 忌 事 续 规范 -Androsd 
大 灾 要 导 男 表 
让 定义 稻 决 使 用 识 组 videoPlayer 
杭 块 5tore 规 范 其 白 于 ， 禄 方 立 加 合用 Method play open setPath start pause stop close show hide lullScreen cancelFuliScreon forword rewind seehTo setBrighiness 
5 pig getBrighanecs setVolume gefVolume addEversLisiener rermoveEventListener serRect openP'ay 所 述 vdeoPiayer 寺 作 7 国术 (不支 的 弄 介 汤 
cre 性) 。 司 侠 进 。 侨 注 设 等 播 放 位 置 等 拟 作 ，、 训 可 设 着 绊 诈 亮 昔 基 系 境 声 言 大 小 ， 通 过 鉴 天 樟 口 可 攻取 机 次 上 的 各 捉 手 黄 扒 作 事件 。 复 开本 术 半 对 可 把 本 村 
所 当 健 一 个 frame 产 加 在 window 叭 frame 上 。Android 
图 1 一 2 
十 EH He DE al 十 6 站 、 ~ 
点 击 其 个 搜索 结果 ， 查 看 模块 的 详细 文档 。 比 如 点 击 “videoPlayer” 之 后 可 以 看 到 这 个 
划 志 于 页 旦 了 六 毕 加 壮 了 一 .个 闪 昌 二 化 
模块 对 于 视频 播放 提供 了 很 多 API， 这 些 API 基本 获 盖 了 一 个 视频 播放 器 所 有 常见 的 功能 ， 如 
图 1-3 所 示 。 
€ C © docs.apikcloud.com/ Cient-APUFunc-ExVvidecPlayer 分 本 站 
@ Aplcloud APP 开 发 平台 。。 APP 定 制服 务 开发 者 社区 VIP 服务 里 例 [= ES 
Sesrch 
开 营 文本 videoPlayer 
a ED 
Mrmrene | 
APP 定 制 玉 各 介绍 
新 手 开发 而 南 play open setpath Mart 
部 渤 第 一 个 羡 用 pause stop cose show 
如何 开发 出 优 弄 的 tde fulltScreen cancelfulSereen forward 
Ancioudm rwand seekTo setArightness getBnghtness 
模 析 使用 流程 setVolurne getVolume addfventLiytener removefventlistener 
模块 开发 erRect openplay 
开发 模 决 设计 筑 范 
借 鼠 开发 而 痪 105 
机 块 开发 页 概述 
_Androld_Studio 
醒 决 开发 布 南 YideoPiayer 对 装 了 杭 频 潮 撤 功 限 (不 支持 医 问 潘 放 ) 。 梧 亿 进 ， 快 迟 设 置 汪 歇 位 置 各 并 作 、 杰 可 设置 恒生 充 碘 相 系 块 声 竟 大 小 。 生 过 知 关 本 口 吉 获取 必 
A 块 上 的 于 桩 手 筋 吕 作 事件 ， 证 用 本 杭 甘 时 可 把 本 模块 当代 一 个 fame 闪 加 在 window 可 frame 上 。Android 平台 上 支持 的 的 更 条 文件 的 式 有 : MP4、 
杭 决 惠氏 梳 东 -05 30p; OS 不 台 寺 支持 的 视频 文件 杨过 有 : MOV，NP4，M4V。 本 模块 对 并 了 两 进 尖 故 方案 : 一 ， 通 过 恒 才 play 将 口 ， 寓 汝 打 开 一 个 自 宪 默认 如 收 开 而 的 
术 炊 审慎 帝 范 -Android 播放 着: 二 ， 通 过 open 接口 、 打 开 一 个 合 潘 玫 鸭 界 醒 ， 再 配合 farne 自 定义 完整 的 播放 机 前 、 通 过 start、pavse、siop 等 按 口 控 撩 滔 坎 接 作 。 
图 1-3 
古 太志 bb ~ A [9 Ly ‘~ SS 
比如 要 查找 支付 功能 ， 可 以 在 文档 中 搜索 “支付 ”， 通 过 搜索 结果 可 以 看 到 在 APICloud 
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平台 上 有 很 多 个 提供 支付 功能 的 模块 ， 如 aliPay (支付 宝 ) 、wxPay ( 微 信 支 付 ) 、unionPay ( 银 
联 支付 ) 、paypal (PayPal 支付 ) 、iap (iOS 应 用 内 支付 ) 等 ， 也 有 ping++、beeCloud 等 第 三 
聚合 类 的 支付 模块 。 点 击 每 个 模块 均 可 以 查看 具体 的 API 详情 。 
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读者 想 了 解 APICloud 平台 有 哪些 能 力 ， 最 简单 的 方法 就 是 到 APICloud 官方 文档 中 去 搜索 相应 
的 功能 ， 这 样 就 可 以 一 目 了 然 地 知道 APICloud 平台 有 没有 相应 的 模块 来 支持 自己 想 要 的 功能 。 






















































































2. APICloud 能 力 支撑 体系 

前 在 APICloud 平台 上 已 经 提供 了 600 多 个 模块 ， 上 万 个 API。 这 些 API 基本 可 以 覆盖 一 
款 App 所 需 的 所 有 常用 功能 ， 为 方便 表述 ， 它 们 被 分 为 “平台 使 用 ”“ 基 础 功能 ”“ 界 面 布 局 ”“ 设 
特性 ”“ 功 能 扩展 ”和 “开放 服务 ”六 大 类 ， 其 分 类 与 具体 包含 内 容 如 图 1-4 所 示 。 



































































































































































































































功能 扩展 

+ 应 用 创建 + 应 用 生命 周期 + 布局 框架 + 网 络 状态 + 统计 图 表 + 数据 云 

+ 应 用 配置 + 应 用 间 通 信 + 窗口 体系 + 传感器 + 文档 阅读 + 推送 

+ 代码 管理 + 应 用 沙 箱 管理 + 窗口 间 通 信 + Touch ID + 资源 浏览 + 统计 分 析 
+ 证 书 管理 + 网 络 通信 + 窗口 生命 周期 + 蓝牙 + 压缩 + 即时 通信 
+ 模块 管理 + 数据 存储 与 io + 动画 效果 + Wi-Fi + 加 密 + 广告 

+ 开发 调试 + 音 视 频 播放 + 前 端 框架 + iBeacon + 格式 转换 + 客服 

+ 云端 编 译 + 图 片 处 理 + 界面 交互 + 相机 + 条 码 扫描 + 分 享 

+ 加 密 加 固 + 事件 与 手势 + 屏幕 适 配 + 联系 人 + 语音 识别 + 支付 

+ 版 本 管理 + 数据 图 片 缓存 + UI 模块 使 用 + 定位 + 图 片 识别 + 短信 验证 
+ 云 修复 + 自 定义 模块 + 混合 布局 + 地 图 + loT 扩 展 + 增值 服务 
过 + i 下 二 不 a 

图 1 一 4 


1.1.2 开发 模式 、 技 术语 言 和 平台 定位 

很 多 APICloud 初学 者 会 关心 这 些 问题 : APICloud App 的 开发 模式 是 什么 样 的 、 使 用 什么 技 
术语 言 、 目 前 自己 的 开发 团队 是 和 否 适合 使 用 APICloud 开发 App、 整 个 APICloud 的 学 习 曲 线 是 
什么 样 的 、 入 门 简 不 简单 等 。 







































































































































































1. 开发 模式 和 技术 语言 

APICloud 应 用 的 开发 模式 是 使 用 标准 的 HIML、CSS 和 JavaScript+APICloud 扩展 API 来 
进行 App 开发 ， 如 图 1-5 所 示 。APICloud 的 App 开发 使 用 的 是 标准 的 HTMLS5 技术 ， 针 对 标 ? 
HTML5 所 不 具备 的 功能 或 是 用 HTML5 实现 体验 不 好 的 功能 (这 些 功 能 也 是 开发 者 在 App 
发 过 程 中 非常 常用 的 功能 ) 。APICloud 提供 了 600 多 个 扩展 模块 和 上 万 个 API， 通 过 这 些 模块 和 














































































































































































































































































































1.1 APICloud 平台 介绍 7 























API 来 扩展 HIML5 的 功能 ， 满 足 App 的 开发 需求 。 





JS 
HTML csS 吊 d 


1-5 


2. 扩展 API 调 用 方式 


APICloud 扩展 API 的 调用 方式 与 调用 标准 的 JavaScript 方 法 是 完全 一 样 的 。APICloud 引擎 
的 核心 API 是 放 在 window.api 这 个 对 象 下 面 的 ， 这 个 对 和 象 是 APICloud 在 JavaScript 全 局 作 
域内 扩展 的 唯一 一 个 对 象 ， 可 直接 调用 。 如 果 想 调用 某 个 模块 下 面 的 方法 ， 可 以 通过 requir 
的 方式 动态 引入 ， 通 过 在 api.require 方法 的 参数 中 指定 某 个 模块 的 名 称 来 引入 相应 的 模块 ， 
然后 调用 模块 下 面 的 方法 ， 具 体 演 示 如 下 。 












































































































































































































































































































































// 核 心 API 在 window.api 对 象 下 ， 可 以 直接 调 
api.methodName (param, callback); 














// 扩 展 模块 需要 require 引入， 遵守 commonJS 规范 
Var module = api.require('moduleName'); 
module.methodName (param, callback); 


param: {} // 参 数 ， 是 一 个 JSON 对 象 
callback: function(ret，err) {} // 回 调 函数 ， 是 一 个 Function 对 象 ， 异 步 方 法 调用 的 结果 通过 此 函数 返 
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所 有 API 的 调用 方式 都 是 相同 的 ， 第 一 个 参数 是 一 个 JSON 对 象 ， 承 载 着 要 传递 给 模块 的 
信息 ;第 二 个 参数 是 一 个 callback 函数 。APICloud 大 部 分 的 API 调用 都 是 异步 方式 ， 在 调用 的 
时 候 ， 要 指定 一 个 callback 函数 ， 当 这 个 API 操作 完成 时 ， 操 作 结 果 将 通过 该 callback 函数 回调 。 
















































































































































































些 常用 的 调用 方式 ， 比 如 # 个 新 窗口 ， 可 以 调用 api .openwin() ;打开 通讯 录 可 上 
调用 api.openContacts () ， 录 音 、 图 片 缓存 等 也 是 调用 相应 的 方法 。 如 果 想 去 加 载 文件 系统 
模块 ， 可 以 通过 api.require("fs") 来 加 载 名 模块， 然后 调用 级 模块 下 面 的 方法 。 使 用 条 码 扫 
描 模 块 也 是 类 似 的 。 示 例如 下 。 
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-IT 









































新 : api.open Win()。 















































+ 
。 打开 系统 通讯 录 : api.openContacts()。 
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e。 录音 : api.startRecord()。 
e 缓存 网 络 图 片 : apiimageCache()。 




































































. [0 载 人 模块 : var fs = api.require('fs')。 

。 新 建 一 个 文件 : fs.createFile()。 

e。 加 载 二 维 码 / 条 形 码 扫 描 模 块 : var scanner = api.require('FNScanner')。 
。 打 维 码 / 条 形 码 扫描 : scanner.openScanner() 。 






























































APICloud 技术 是 基于 标准 的 HTML、CSS 和 JavaScript 技术 ， 在 标准 的 JavaScript 基础 上 
展 了 一 个 核心 对 象 -api 对 象 和 数 百 个 模块 。 这 些 模 块 可 以 使 用 api.require 函数 载 入 ， 并 使 
果 作 标准 JavaScript 对 象 的 方式 调用 上 述 模块 列举 出 方法 。 
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3. 扩展 API 的 作用 


读者 可 能 会 问 ，APICloud 为 什么 要 扩展 这 么 多 API 呢 ? 其实 APICloud 所 扩展 的 API 都 是 
标准 的 JavaScript 所 不 支持 的 方法 ， 或 是 用 标准 HTMLS 来 实现 但 体验 不 好 的 功能 。 读 者 可 以 把 
HTMLIS5 理解 成 一 门 技术 、 一 门 语言 ， 但 是 它 还 没有 达到 一 个 平台 的 水 平 。 这 就 是 APICloud 为 
什么 要 做 这 些 扩展 。APICloud 所 有 的 扩展 主要 是 围绕 以 下 这 4 个 方面 进行 的 。 
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。 兼容 性 : 在 PC 互联 网 时 代 ， 浏 览 器 具有 多 种 内 核 ，JavaScript 框架 产生 的 最 初 原因 就 是 
为 了 实现 JavaScript 代码 在 各 种 浏览 器 上 的 兼容 和 适 配 。 在 移动 互联 网 时 代 ， 虽 然 ? 
流 的 手机 系统 中 ，Android 和 iOS 的 浏览 器 内 核 都 是 webkit， 但 是 出 于 商业 原因 ， 合 昌 
从 webkit 中 建立 了 一 个 新 的 分 支 ， 叫 blink。 现 在 两 个 分 支 的 主要 贡献 者 分 别 是 苹果 和 
谷歌 ， 所 以 未 来 这 两 个 内 核 的 兼容 性 问题 会 一 直 存 在 。 

。 实用 性 : 
4 ”Page 不 等 于 App， 标 准 的 HTML、CSS 和 JavaScript 规范 更 多 是 用 来 定义 网 页 和 文 

档 的 ， 例 如 现在 的 一 些 框 架 都 在 讲 SPA 结构 ， 它 是 以 单 页 面 为 主 的 ， 很 多 HTML 
标签 是 针对 于 文本 信息 展示 的 ;而 App 则 不 然 ，App 更 多 是 强调 功能 和 体验 ， 在 
原生 系统 中 有 很 多 的 组 件 ，HTML5 标签 和 Native 组 件 的 设计 规范 是 完全 不 同 的 。 
所 以 ， 想 用 标准 的 HIML5 技术 开发 一 个 App 是 不 现实 的 ， 人 们 不 能 直接 把 为 
WebPage 所 制定 的 规范 直接 搬 到 App 上 。 

4 B/S 架构 与 Client/Cloud 架构 : 在 PC 互联 网 时 代 ， 终 端 产品 的 主要 架构 还 是 B/S 
架构 ;但 是 在 移动 互联 网 时 代 ， 终 端 产 品 的 主要 类 型 是 App， 而 Apb 是 一 个 完整 的 
Client/Cloud 架构 。 在 移动 端 ， 实 现 界面 和 功能 ， 在 云端 提供 数据 和 服务 。 页 面 布 

局 是 存放 在 移动 端的 ， 功 能 实现 也 是 在 移动 端 完 成 ， 所 以 用 户 在 使 用 时 可 以 感受 到 
App 的 启动 、 页 面 演 染 和 布局 展示 是 很 快 响应 的 。 

4 速度、 交互 和 体验 : 这 3 个 问题 是 用 HITML5 技术 直接 开发 App 的 最 大 挑 成 。 其 
立 ， 如 果 使 用 HTMLS5 技术 实现 一 个 界面 ， 演 染 之 后 显示 出 来 ， 用 户 看 到 这 个 界 画 
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时 并 不 能 立刻 分 辨 出 它 是 用 HTML5 实现 的 还 是 用 Native 技术 实现 的 。 但 是 当 用 户 
， 点 击 一 下 ， 体 验 一 下 响应 速度 或 者 做 一 个 手势 ， 触 发 一 个 动画 ， 这 时 

户 就 可 以 非常 清楚 地 感受 到 ， 并 能 分 辨 出 该 界面 是 用 Native 技术 开发 的 还 是 用 
HTML5 开发 的 。 所 以 速度 、 交 互 和 体验 也 是 使 用 HIML5 技术 开发 App 必须 去 解 
决 的 问题 。 
。 持续 性 、 静 态 标准 与 动态 标准 : HIML5 的 定稿 花 了 7 年 时 间 ， 并 且 整 个 标准 的 迭代 是 
缓慢 的 ;而 Android 和 iOS 每 一 次 版 本 更 新 都 会 新 增 很 多 功能 ， 这 些 新 增 的 恰恰 者 
前 行业 里 最 需要 的 功能 ， 但 这 些 功能 很 难 快速 通过 制定 新 的 HTMLS5 标准 进行 更 新 ， 

在 各 个 浏览 器 里 支持 起 来 。 那 会 是 一 个 非常 漫长 的 过 程 。 














































































































































































































































































































































































































































































































。 扩展 性 : 在 开发 一 款 App 的 时 候 ， 开 发 人 员 需 要 扩展 很 多 的 功能 ， 有 时 候 要 和 行业 特 
点 结合 ， 有 时 候 还 要 跟 硬 件 结合 ， 这 就 会 用 到 大 量 国内 的 开放 服务 ， 如 推送 、 直 播 





























































































































都 没有 定义 ， 所 有 的 标准 浏览 器 

















智能 识别 等 。 所 有 的 这 些 功能 ， 标 准 的 HIML5 规 ? 
引擎 也 没有 默认 支持 。 
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总 的 来 说 ，APICloud 扩展 的 所 有 功能 都 是 标准 HIML5 所 没有 的 ， 如 果 HIML5 有 并 且 胡 
App 中 运行 起 来 没有 任何 问题 ，APICloud 平台 也 没有 必要 去 做 这 个 扩展 。APICloud 所 有 扩展 的 
功能 其 实 就 是 为 了 去 解决 HTML5 在 兼容 性 、 实 用 性 、 持 续 性 和 扩展 性 等 方面 的 问题 。 





































































































































































































4. 模块 Store 
在 APICloud 模块 Store 中 可 以 查看 APICloud 平台 扩展 的 所 有 功能 ， 如 图 1-6 所 示 。 






























































« C DO wwwapicloudcormymoduiesiore 安 


APlCloud APP 开 发 平公 APP 定 制服 务 开发 者 社区 VIP 服务 实例 dbouzrm ~ 








oe 先 费 0 全 我 5 VP ¥134 








D0000000000000 https//yabook.org 


10 


A 
EE: 


1 章 





APICloud App 














5. APICloud 平 台 定 位 


APICloud 十 














发 流程 






































款 App 所 需要 的 所 在 
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。 这 就 是 APICloud 对 











训 和 系统 之 间 的 一 层 ， 在 这 一 层 中 ，APICloud 
展 功能 ， 然 后 以 统一 API 的 

















个 中 间 层 ， 是 在 应 用 程 
系统 调用 、 开 放 服 务 和 扩 
F 台 的 定位 ， 如 图 1-7 所 示 。 
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2 式 提 供给 





应 用 程序 


APICloud 


1.1.3 技术、 产品、 生态、 案例 和 商业 模式 


















































































































































































































































































































































































































































































































































































































































这 部 分 有 大 量 的 内 容 需 要 给 读者 介绍 ， 但 是 本 书 不 想 为 此 大 量 的 篇 幅 。 读 者 可 以 通过 
APICloud 官 网 公开 课 的 视频 来 详细 了 解 。 在 官方 视频 教程 几 百 集 的 课程 ， 其 中 “APICloud 
视频 之 初级 代码 篇 第 1 ~ 3 讲 2” 通过 几 小 时 的 视频 给 读者 详细 介绍 了 APICloud 技术、 产品 、 商 
业 模 式 、 案 例 以 及 生态 的 方方面面 ， 如 果 读 者 是 第 一 次 接触 APICloud， 我 们 建议 花 一 定 的 时 间 
去 观看 这 些 公开 课 的 视频 
1.1.4 开发 者 服务 体系 

发 者 在 选择 或 者 使 个 平台 的 时 候 ， 一 定 会 遇 到 很 多 的 问题 。 遇 到 问题 时 应 该 如 何 解 
决 ? 此 外 ， 开 发 者 还 会 关心 这 个 平台 在 提供 技术 的 同时 还 能 提供 哪些 服务 ” 有 没有 一 个 完整 的 
生态 ? 有 没有 一 个 活跃 的 社区 提供 技术 支持 、 方 便 学 习 和 交流 ? 

针对 这 些 问 题 ， 本 节 列 举 以 下 APICloud 开发 者 服务 体系 相关 的 产品 。 

1.， APICloud 开发 平台 
这 里 是 APICloud 的 官方 网 站 ， 也 是 整个 APICloud 应 用 开发 和 管理 平台 的 入 











中 
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在 官方 网 站 中 ,“ 
在 官方 的 视频 教程 中 。 














发 者 社区 ” 标 


签 下 
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2. 开发 工具 

APICloud 是 一 个 移动 应 用 的 开发 平台 ， 开 发 APICloud 应 用 需要 编码 工具 。 对 于 开发 工具 
来 说 ，APICloud 支持 包括 Atom、Sublime Text、Eclipse、WebStorm、VSCode， 以 及 基于 Node 
坟 的 CLI 命令 行 工 具 。 开 发 者 在 开发 APICloud 应 用 的 时 候 ， 可 以 使 喜欢 的 任意 一 款 主流 
的 编码 工具 ， 只 需要 在 这 些 工 具 中 安装 相应 的 APICloud 插件 就 可 以 了 。 

以 Sublime Text3 为 例 ， 如 图 1-8 和 图 1-9 所 示 ， 可 以 看 到 这 有 Windows 版 和 Mac 
版 的 下 载 地 址 ， 这 里 所 下 载 的 是 APICloud 为 Sublime Text 提供 的 插件 。 下 载 完 成 后 ， 的 
Sublime Text， 在 Sublime Text 中 安装 完 APICloud 插件 之 后 ， 就 可 以 在 Sublime Text 中 使 用 “新 
建 APICloud 项 目 ” “新建 APICloud 文件 ” “进行 Wf 真 机 同步 “日 志 输 出 ”“ 代 码 管理 ”等 























































































































Atom、WebStorm.、 











发 APICloud 应 





也 可 以 分 别 安装 




















免费 开源 的 ， 草 








所 需 的 相关 功能 。 在 其 他 工具 中 ， 如 Eclipse 和 

































































VSCode 等 






































APICloud 为 这 些 工 具 所 提供 的 
站 在 GitHub 的 APICloud 开源 分 支 > 





对 应 插件 ， 所 有 这 些 APICloud 的 
2 中 查看 源码 。 
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Sublime Text File 


WiFI 真 机 同 沙 
”CC 。 WiFi 全 最 真 机 同步 . 


Androsd 真 机 同步 - 
I0S 真 机 同步 

压 娘 Widget 包 

本 地 打包 


SYN 


vv 
mm nnnnm 


New Fie— 
New Folder. 


Open / Run 
Open In Browser 


Open With Finder 
Open With 
Reveal 


Find & Replace.— 


Find Advanced 





rouoems 
|—®. i WIF 真 机 网 步 配 置 


* OT re] » 
. 新 建 APICloud 文 件 


Remove Folder from Project 


Open in New Window 


Find Files Named... 








Edt Selection Find View Goto Tools Project Window Hep 十 11 儿科) 人 BE 网 B 上 和 1154 国 QQ : 
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< >Root Window</ 


initWareTypeList(); 


initDatabase(); 


initPushoeTui( ); 


api.openWin({ 


图 1-8 
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会 全 程 使 用 APICloud Studio 2 作为 开发 
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[L 具 ，APICloud Studio 2 是 
























































具 。 在 本 书 的 附录 B 








APICloud 提供 给 





对 APICloud Studio 2 


发 者 的 一 款 基 了 
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Atom 扩展 的 全 功能 集成 


的 介绍 。 




































































发 工具 的 使 用 进行 全 面 详细 























@ 在 官方 网 站 点 击 





“开发 工具 ”。 
@) 在 GitHub 中 搜索 “APICloud-DevTool”。 
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3. 开发 文档 















































Sublime APICloud Plugins 
















































































第 1 章 发 流程 
€ C © wwwapicloud.com/ devt 从 
© APICloud APP 开 发 平台 开发 者 社区 。 VIP 服 务 ”和 雪 g 
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整个 APICloud 开发 文档 包含 J 第 一 部 分 是 对 APICloud 的 整体 介绍 以 及 开发 
工具 的 介绍 ， 也 就 是 其 网 页 最 左 侧 的 这 一 列 ; 中间 部 分 是 对 APICloud API 的 介绍 ， 包 括 端 API、 
扩展 模块 、 前 端 API 等 ， 最 右 侧 是 技术 专题 ， 这 里 会 把 开发 过 程 中 常见 的 问题 以 技术 
S$ 题 的 形式 总 结 出 不 管 是 对 APICloud 的 ， 还 是 已 经 用 APICloud 开发 过 应 用 的 开发 
， 本 书 都 建议 在 遇 到 问题 的 时 候 ， 第 方式 就 是 去 查找 文档 。APICloud 文档 遵循 简洁 
清晰 的 书写 原则 ， 用 到 某 一 个 API 的 时 候 ， 到 文档 中 查看 其 对 应 的 使 用 说 明 即 下 


4. 开发 者 社区 
APICloud 在 
资深 的 APICloud 
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提问 都 可 以 鲁 
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Ed 











很 多 优质 和 
间 获 得 解答 。 













































































APICloud 平台 有 价值 的 帖子 和 技术 专题 的 讨论 ， 所 以 非常 建 
议 开发 者 常 去 和 ， 屠 里 的 帖子 学 习 经 验 的 总 结 。 本 书 希 望 读者 在 开发 过 
程 中 遇 到 问题 的 时 候 ， 可 以 到 社区 答 或 者 提问 ， 


































































































入 门 的 帖子 从 头 型 




















遍 ， 这 是 非 党 








@) 








在 官方 网 站 点 击 “ 文 档 "。 
在 官方 网 站 点 击 “ 开 发 





ll 
































初学 者 最 好 能 花 一 些 时 间 把 新 
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5.。VIP 服 务 ? 

很 多 大 型 企业 或 者 创业 公司 在 选择 APICloud 的 时 候 ， 由 于 整个 项 目的 开发 周期 比较 紧 
张 ， 而 刚刚 接触 一 个 新 的 平台 ， 使 会 遇 到 一 些 问题 ,这 些 问题 在 社区 中 是 可 以 得 到 解决 的 ， 
但 是 可 能 不 够 及 时 。 针 对 这 类 客户 ，APICloud 提供 了 VIP 技术 支持 服务 ,企业 也 可 以 去 购买 
APICloud 企业 版 。 当 然 这 个 是 收费 的 ， 企 业 购买 完 之 后 ，APICloud 将 以 工 单 的 形式 提供 技术 支 
寺 ， 企 业 客 户 有 任何 问题 ， 半 个 小 时 之 内 APICloud 官方 会 有 技术 支持 一 对 一 地 进行 解答 。 























































































































































































































































































































6。. 开源 代码 分 享 % 

APICloud 提供 了 非常 丰富 的 开源 代码 ， 这 些 源码 包括 App 实例 源码 ， 很 多 都 是 APICloud 
发 者 所 开发 的 一 些 App 模板 源码 ， 也 包括 一 些 模块 的 使 用 示例 代码 ， 以 及 App 开发 过 程 
些 常用 的 JavsScript 框架 代码 。 当 然 ， 这 里 也 有 模块 的 源码 ， 因 为 APICloud 的 很 多 模块 都 
是 开源 的 ， 所 以 模块 的 源码 就 是 Android 和 iOS 的 模块 工程 源码 。 同 时 ，APICloud 为 Sublime 
Text、Atom、WebStorm、Eclipse 等 所 有 主流 的 开发 工具 提供 的 插件 、 命 令 今 行 的 CLI 工具 ,以 及 
APICloud Studio 所 有 的 代码 都 是 完全 免费 开源 的 。 


















































































































































































































































































































































这 里 也 有 APICloud 前 端 框 架 和 官方 文档 的 源码 ，APICloud 官方 文档 本 身 就 是 开源 的 。 读 
如 果 发 现 官方 文档 的 编写 存在 不 够 准确 或 者 不 够 完善 的 地 方 ， 可 以 随时 在 官方 文档 的 开源 分 
支 中 提交 修改 ， 一 同 为 APICloud 生态 发 展 做 贡献 。 还 有 APICloud 云 SDK， 也 就 是 APICloud 
提供 的 云端 服务 ， 官 方 提供 了 不 同 技 术语 言 版 本 的 SDK， 包括 Nodejs、PHP、Java、.NET 等 ， 
这 些 不 同 语言 版 本 的 云 API SDK 也 都 是 开源 的 。 
























































































































































































































































更 多 APICloud 开源 代码 可 以 到 APICloud GitHub 开源 分 支 9 查看。 




















7. 商业 案例 展示 
前 ， 基 于 APICloud 平台 开发 的 应 用 已 有 2 万 多 款 在 苹果 AppStore 上 线 。 在 APICloud 商 
业 案 例 展 示 区 ， 用 户 可 以 看 到 一 些 用 APICloud 开发 出 来 的 应 用 案例 ， 每 期 会 展示 数 百 款 的 已 
上 线 App， 这 些 案例 都 是 用 APICloud 开发 的 商用 Apb， 不 是 WebApp， 人 
HTML5 网 站 。 所 有 这 些 App 旁边 都 丰 码 ， 用 户 可 以 直接 扫 码 安装 体验 ， 这 些 应 用 都 是 使 
APICloud 平台 开发 的 。 
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如 果 APICloud 的 开发 发 了 一 款 App， 并 且 认 为 其 性 能 体验 不 错 ， 可 以 联系 APICloud 
言 方 的 运营 人 员 ， 申 请 在 官网 展示 这 款 App。APICloud 可 以 在 案例 区 为 其 免费 展示 ， 案 例 区 会 
定期 更 新 申请 展示 的 App。 初 学 者 如 果 想 看 一 下 APICloud 平台 开发 出 来 的 App 是 什么 样 的 运行 


































































































































































































方 网 站 点 击 “VIP 服 务 ”。 

击 官方 网 站 中 “开发 者 社区 ”标签 下 面 的 源码 。 
jitHub 中 搜索 “apicloudcom”。 

官方 网 站 点 击 “ 开 发 案例 ”。 
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体验 ， 就 可 以 直接 扫 码 安装 运行 这 些 案 例 ， 下 体验 和 效果 。 









































8. 模块 Store"( 聚 合 APDI) 

APICloud 模块 Store 上 展示 了 APICloud 平台 上 所 有 的 扩展 模块 。APICloud 使 用 行业 标准 
的 模块 扩展 机 制 ， 对 于 具有 Android 和 iOS 开发 经 验 的 开发 者 ， 可 以 直接 按照 APICloud 模块 扩 
展 机 制 为 APICloud 贡献 模块 ， 这 些 模块 可 以 选择 收费 也 可 以 免费 。 








































































































































































































前 ，APICloud 平台 上 有 600 多 个 模块 ， 大 部 分 的 模块 是 免费 的 。 大 约 有 1/3 是 APICloud 
言 方 开发 的 ， 食 模块 都 是 免费 的 ， 基 本 可 以 覆盖 App 开发 所 需 的 全 部 基础 功能 ，; 
还 有 1/3 是 第 三 方 服 务 厂 商 开 发 的 ， 比 如 高 德 地 图 、 科 大 讯 飞 语音 识别 、 融 云 即时 通讯 等 ， 最 
后 的 1/3 是 个 人 开发 发 的 ， 个 人 开发 者 提供 的 模块 大 部 分 都 是 收费 的 。APICloud 是 想 建立 
一 个 生态 ， 对 于 Android 和 iOS 的 开发 者 ， 可 以 非常 轻松 地 为 APICloud 模块 Store 贡献 模块 ， 
同时 模块 开发 者 可 以 为 其 开发 的 模块 标 一 个 价格 ， 让 其 他 开发 者 购买 后 使 用 。 
















































































































































































































































































































































































9. 模板 Store2 

APICloud 还 有 一 款 产 品 是 模板 Store。 开 发 者 在 开发 完 一 个 应 用 之 后 ， 如 果 不 想 再 运营 这 个 
你 用 了 ， 或 者 是 单纯 想 做 一 款 应 用 的 模板 ， 如 果 它 是 一 个 完整 的 端 到 端的 应 用 ， 整 个 需求 和 功 
能 都 可 以 达到 一 个 标准 商业 应 用 的 水 平 ， 就 可 以 将 它 作 为 一 个 模板 提交 给 APICloud。APICloud 
官方 可 以 把 它 模板 化 后 成 为 APICloud 模板 Store 中 的 一 款 模板 。 整 体 是 有 一 个 审核 流程 的 。 模 
板 审核 通过 之 后 ， 就 可 以 在 APICloud 模板 Store 上 进行 销售 。 在 模板 Store 上 架 后 ， 其 他 开发 者 
只 需 一 键 购买 ， 在 线 支 付 ， 就 可 以 在 几 分 钟 之 内 获得 这 样 一 个 模板 。 所 购买 的 产品 包括 这 个 模 
板 的 管理 后 台 、 模 板 的 Android 和 iOS 的 安装 包 以 及 一 些 必 要 的 皮肤 定制 等 服务 ， 同 时 在 开发 
的 APICloud 应 用 控制 台中 ， 也 会 有 一 个 对 应 的 “模板 应 用 ”的 项 目 。 


















































































































































































































































































































































































































































































































































10. APICloud 应 用 定制 服务 

在 APICloud 平台 上 每 天 都 会 聚集 很 多 客户 的 App 定制 需求 ， 因 为 很 多 客户 认可 APICloud 
平台 和 App 开发 模式 ， 但 是 由 于 没有 自己 的 开发 团队 ， 所 以 希望 APICloud 能 够 为 他 们 提供 App 
定制 服务 ， 或 者 为 他 们 推荐 优质 的 团队 来 进行 项 目 实施 。APICloud 应 用 定制 服务 在 标准 化 
的 开发 流程 和 项 目 管理 流程 。 

























































































































































































































































































1.1.5 新 手 人 门 APICloud 应 用 开发 
这 里 推荐 一 些 优质 的 入 门 资料 ， 读 者 可 以 在 官方 文档 页 面 中 找到 这 些 资料 。 


































































































点 击 官方 网 站 中 ,“App 开 发 平台 ”下 面 的 模块 Store。 
点 击 官方 网 站 ,“App 定 制服 务 ”下 面 的 模板 Store。 
点 击 官方 网 站 中 的 “App 定制 服务 ”。 
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。 APICloud 新 手 开 发 指南 ， 在 这 个 指南 当中 ， 基 本 上 涵盖 了 APICloud 应 用 开发 入 门 所 需 
的 各 方面 知识 ， 并 且 APICloud 官方 也 会 不 断 更 新 这 个 教程 ， 所 以 这 个 新 导 
所 有 APICloud 初学 者 必须 要 认真 阅读 的 文档 。 
。 APICloud 新 手 教程 集合 贴 "， 这 是 社区 里 的 新 手 教程 集合 贴 ， 里 面 有 很 多 优秀 开发 者 的 
发 技巧 、 经 验 和 教程 的 总 结 ， 推 荐 新 手 一 定 要 看 。 
。 APICloud 视频 教程 2， 如 果 初 学 者 想 找 一 种 更 简便 的 方式 
APICloud 的 视频 教程 ， 在 这 个 视频 教程 中 已 经 有 数 百 集 的 视频 。 
e。 APICloud 在 线 培训 ，APICloud 定期 会 举办 线 上 的 视频 直播 培训 ， 
APICloud 工程 师 ， 也 有 优秀 的 APICloud 开发 者 或 其 他 培训 机 构 的 老师 来 直播 。 
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学 习 ， 也 可 以 去 看 
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1.2 体验 完整 项 目的 开发 流程 


在 对 APICloud 平台 有 了 基础 的 认识 后 ， 读 者 将 跟随 本 节 内 容 从 零 开始 创建、 修改、 
试 、 编 译 和 运行 一 个 最 简单 的 App。 这 个 App 不 包含 任何 复杂 的 开发 技术 ， 则 在 让 读者 体验 一 
个 完整 App 的 开发 流程 。 在 本 厄 的 最 后 ， 这 个 应 用 将 可 以 在 移动 设备 上 运行 。 






























































































































































1.2.1 注册 APICloud 账号 

在 创建 App 项 目 之 前 ,首先 要 有 一 个 APICloud 账号 ， 这 个 账号 非常 重要 ， 请 妥善 保管 。 
乓 击 APICloud 官方 网 站 右上 和 角 的 注册 按钮 即 可 开始 注册 。 注 册 过 程 非常 简单 ， 注 册 完 成 后 请 
录 账 户 。 










































































































































































1.2.2 创建 一 个 App 项 日 


创建 一 个 新 的 项 目 有 两 种 方式 : 












































。 在 APICloud 云 平台 上 创建 ， 
e 在 APICloud 的 官方 开发 工具 中 创建 。 























































































































APICloud 推荐 的 集成 开发 工具 是 APICloud Studio 2。 同 时 也 为 其 他 常用 的 开发 工具 软件 提 
供 了 插件 支持 ， 如 Sublime、Eclipse、WebStorm、Atom 等 ， 读 者 可 以 根据 自己 的 使 用 习惯 选择 
对 应 的 工具 。 


































































































































































































需要 下 载 这 个 开发 工具 ， 选 择 官 网 首页 的 “App 开发 





本 书 以 APICloud Studio 2 为 例 。 
F 台 ”， 然 后 选择 “开发 工具 ”。 
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Q@ ”点 击 官方 网 站 中 的 “开发 者 社区 ”， 搜 索 “ 新 手 教程 集合 贴 ”。 
@ 点击 官方 网 站 中 的 “视频 教程 ”。 
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在 新 的 页 面 中 根据 具体 的 操作 系统 选择 对 应 版 本 的 APICloud Studio 2 进行 下 载 。 下 载 完成 
E 缩 包 解 压 到 任意 位 置 ， 在 解压 后 的 文件 中 找到 类 似 “apicloud-studio-2.exe” 的 文件 ， 这 


是 开发 工具 的 可 执行 文件 。 建 议 为 它 创建 桌面 快捷 方式 以 方便 使 用 。 
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1. 在 APICloud 云 平台 上 创建 新 项 目 
在 官方 网 站 登录 成 功 后 ， 将 鼠标 移动 到 页 面 右上 角 的 用 户 名 处 ， 在 显示 的 菜单 中 点 击 “ 


发 控制 台 ”。 





















































































































































间 部 分 会 显示 APICloud 














+ 控制 台 页 面 后 ， 页 面 左 侧 是 项 目 列表 ， 现 在 它 是 空白 的 ;地 
的 更 新 日 志 (APICloud 平台 自 上 线 以 来 坚持 每 周 更 新 一 个 版 本 ) 等 平台 动向 信息 ; 右 侧 是 
个 人 信息 以 及 一 些 工具 按钮 ， 如 图 1-10 所 示 。 

























































































































































































ca APICloud 我 的 账户 。 ”文档 。 在 线 社 区 APP 定 押 。” ”VIP 服 务 él pomelo 


优先 技术 支持 。 鸯 应 时 间 433”120 次 今日 矶 于 











pomelo 国 
I 升级 s/10 
立即 提问 
团队 协作 0/3 
优先 技术 支持 
更 新 日 志 
云 服务 几 单 
APICI V1.2.42 M 
Cloud SDK / 389 培训 深 程 





图 1-10 






































点 击 左上 角 的 “创建 应 用 ”， 在 弹出 的 选中 “Native App”( 默 认 选 项 ) ， 在 “名 称 ” 
输入 框 中 填 入 “HelloAPICloud” 并 在 “说 明 ” 输 入 框 中 填 入 任意 说 明 信 息 ， 之 后 点 击 创建 。 此 
时 一 个 新 的 项 目 便 被 创建 好 了 并 显示 了 刚刚 创建 项 目的 管理 页 面 ， 后续 会 对 这 个 页 面 的 相关 功 
能 进行 循序 渐进 的 学 习 。 
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在 项 目 创建 完成 后 还 需要 将 这 个 项 目 检 出 到 本 地 进行 开发 ，APICloud 支持 通过 git 或 svn 进 
行 代码 管理 (关于 代码 版 本 管理 的 资料 请 查阅 相关 文档 ) ， 即 便 读者 不 了 解 代码 版 本 管理 的 相关 
知识 也 不 妨碍 本 节 的 学 习 。 
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打开 APICloud Studio 2， 如 发 者 是 首次 运行 此 开发 工具 则 需要 进行 登录 。 请 用 之 前 创 
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建 的 账号 进行 登录 ， 否 则 无 法 找到 相应 的 项 目 。 登 录 成 功 后 会 进入 欢迎 页 面 。 



























































此 时 开发 工具 已 经 获得 了 账号 权限 ， 可 以 对 项 目 进 行 操作 了 。 点 击 菜单 栏 的 “代码 管 
现 的 检索 框 中 输入 之 前 创建 的 项 目 名 称 


“HelloAPICloud”， 回 车 确认 (也 可 以 从 下 面 的 模糊 搜索 结果 中 选择 相应 的 项 目 ， 如 图 1-11 所 示 )。 
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里 ” 加 “代码 检 出 ” “APICloud 端 应 Se 在 出 
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untitled 一 Aplcloud Studio 2 
AplCloud 文件 编辑 查看 查找 项 目 代 






码 管理 ”远程 设备 扩展 窗口 帮助 





HelloAPICloud(A6066219195670) 




































































图 1-11 
在 弹出 的 对 话 框 中 选择 这 个 项 目 在 开发 设备 上 的 面 上 新 建 一 个 叫 作 














保存 位 置 〈 例 如 在 号 
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| 检 出 o 

















“HelloAPICloud” 的 文件 夹 ， 人 然后 选择 这 个 文件 夹 ) 并 点 










































































保持 上 默认， 直接 按 回 车 即 可 ， 如 图 1-12 所 示 。 
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在 新 弹出 的 输入 














© Ci\Users\lile\Desktop\HelloAPICloud 一 APICloud Studio 2 


APlICloud 文件 编辑 查看 查找 项 目 代码 管理 远程 设备 扩展 窗口 帮助 





图 1-12 


























发 会 自动 从 APICloud 云端 将 账号 中 的 “HelloAPICloud” 项 目 检 出 到 本 地 计算 机 上 ， 


~ 


稍 等 便 可 以 看 到 默认 打开 的 代码 编辑 页 面 。 











































































































2. 在 APICloud Studio 2 上 创建 新 项 目 


打开 APICloud Studio 2 并 登录 之 前 创建 的 账 
“APICloud 移动 应 用 ”， 分 别 输 入 应 用 名 称 和 应 用 说 明 ， 应 用 框架 选择 “空白 应 用 ”， 之 后 ， 
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18 第 1 章 APICloud App 开发 流程 
完成 。 在 弹出 的 对 话 框 中 选择 新 项 目的 创建 位 置 ， 点击“ 创建 ”。 

稍 等 便 可 以 完成 创建 。 此 时 在 网 站 的 控制 台中 可 以 看 到 刚刚 创建 的 项 
1.2.3 纲 短 珊 目 

在 具 左 侧 的 目录 树 根 目录 中 选择 “html” 
<label id="con">Hello App</label> 这 一 行 (第 26 行 )， 
APICloud” ， 之 后 保存 代码 如 下 : 

<body> 















































<label id="con">Hello APICloud</label> 
<div id='sys-info'></div> 











































































































































































































录 下 的 “main.html” 文 件 ， 





找到 


将 “Hello App” 罕 换 为 “Hello 















































































































































































































































































































































































































































































































































</body> 

在 修改 完 项 目 后 需要 将 修改 后 的 内 容 从 本 地 提交 到 云端 ， 保 证 代码 所 做 的 修改 在 云端 编译 
的 时 候 有 效 。 这 个 过 程 如 下 : 

(1) 右 击 项 目 根 目录 ,选择 “git” 一 “git add + commit”; 

(2) 在 出 现 的 输入 区 域 中 输入 刚刚 进行 了 哪些 修改 或 总 结 ， 例 如 “修改 了 main.html”; 

(3) 保存 (快捷 键 是 ctrl/cmd + s) ; 

(4) 右 击 项 目 根 目 录 ， 选择“ 代码 管理 ”一 “同步 到 云端 ”。 

这 个 操作 非常 重要 ， 开 发 者 不 必 每 次 编辑 后 都 进行 这 些 操作 。 当 完成 一 个 模块 或 一 天 的 工 
作 后 ， 亦 或 进行 编译 前 ， 进 行 一 次 同步 即 可 。 只 有 代码 同步 到 云端 后 才 会 在 编译 的 App 中 生效 。 
1.2.4 调试 项 目 

APICloud 项 目的 调试 有 以 下 两 种 方式 。 

。 直接 在 Web 浏览 器 中 调试 。APICloud Studio 2 集成 了 一 个 检视 器 ， 在 这 里 调整 HTML 
结构 、CSS 样式 非常 方便 。 

。 通过 AppLoader 应 用 装载 器 ， 在 开发 者 的 移动 端 设 备 上 调试 项 目 。 这 种 方式 无 须 对 项 目 
进行 编译 ， 可 以 随时 在 移动 端 设 备 上 看 到 效果 。 这 种 方式 对 项 目 整体 的 调试 、JavaScript 
代码 的 运行 、 模 块 功能 的 调试 特别 有 效 。 

对 于 静态 页 面 通常 使 用 Web 浏览 器 的 方式 调试 ， 用 于 检查 页 面 布 局 和 视觉 效果 ，Web 调 

试 模式 下 无 法 正常 运行 APICloud 扩展 API J 代码 ， 很 多 模块 无 法 调试 。 我 们 需 
要 经 常 在 AppLoader 中 进行 扩展 模块 和 运行 过 程 的 调试 ， 检 查 App 的 逻辑 错误 。 
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1. 通过 浏览 涡 调 试 
在 开发 工具 左 侧目 录 树 中 找到 “index.html” 文 件 ， 右 击 它 ， 并 选择 “实时 预览 "*。 此 时 会 
弹出 一 个 检视 器 ， 显 示 刚 刚 选择 的 页 面 。 这 是 一 个 Chrome 的 调试 窗口 ， 如 图 1-13 所 示 。 
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Hello App 2 
APICloud 文件 入 名 可 在 坦 找 项 目 代码 管理 ”远程 没 备 扩展 窗口 帮助 
Galaxy55Y 360 x 640 Ti%v © [R 日 | Network » SX 


[I@QO mT ve 二 


‘co 国 导 = 
加 Hide data URLs 


图 sc: me Med Font 


| 500ms 1000ms 


Recording network activity 
Perform a request or hit FS5 to 


record the reload 





Console x 


© YW top v Presevelog 


> 














图 1-13 




















为 了 模仿 移动 端 设备 屏幕 尺寸 ， 可 以 点 击 “Responsive” 将 视图 调整 至 内 置 的 设备 尺寸 ， 或 
接 在 后 面 输入 宽 高 数值 。 











































































































2. 通过 AppLoader 在 移动 端 调试 

AppLoader 是 让 APICloud 项 目 直 接 在 移动 端 设备 (如 手机 ) 上 调试 的 技术 ，AppLoader 包 
含 了 App 所 需 模 块 的 运行 环境 ， 目 前 不 需要 对 AppLoader 有 深入 的 理解 。 现 在 需要 针对 不 同 的 
平台 (Android 或 iOS) 下 载 对 应 的 官方 AppLoader: 打开 下 载 地 址 ”之 后 选择 AppLoader， 在 显 
示 的 页 面 中 扫描 二 维 码 下 载 AppLoader 并 安装 。 











































































































































































































接 下 来 以 Android 为 例 ， 在 APICloud Studio 2 中 右 击 界面 左 侧 的 根 目 录 “HelloAPICloud”， 
在 弹出 的 菜单 中 选择 “查看 WIFI 真 机 同步 IP 和 端口 ”( 如 图 1-14 所 示 )。 界 面 右 上 弹出 



















































































































































































@ 在 文档 页 面 ， 点 击 “ 下 载 ”， 然 后 点 击 “AppLoader”。 
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关 信息 ， 主 要 观察 也 和 端口 的 内 容 (如 


APICloud App 














发 流程 
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行 Studio 2 的 电脑 在 
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一 网 络 



































到 AppLoader 界面 











第 一 栏 输入 从 Studio 
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到 提示 ， 
良好 。 








1-15 所 示 )。 接 下 来 要 确保 测试 




















的 移动 端 设备 和 








( 即 同 一 Wi-Fi 下 )。 在 移动 端 打 
拖 动 的 灰色 小 圆 球 。 操 了 





和 这 个 小 图 











自动 后 可 以 
个 输入 窗口 ， 


AppLoader, 


球 ， 会 弹出 
























































名 二 栏 输 入 端 














口 。 点 击 连接 后 ， 如 果 连 接 成 功 会 





























小 圆 球 将 变 成 绿色 ， 如 果 连 接 失败 ， 请 尝试 关 





司 计 算 机 防火 墙 























旦 检查 网 络 状况 是 





| 





indexhtml— CN\l 


APICloud 文件 编 轩 





* FAPICloud Studio 2 
WIFI 塔 主 司 沙 (ctd-) 
WIFI 全 虽 同 步 
WIFI 白 动 同 少 
豆 者 WIFI 真 机 同步 Ip 入口 
动 志 字体 大 小 
USB 同步 (Android) 
新 建 APICloud 模板 文件 
新 建 而 面 柑 竺 
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图 1-14 








© indexhtml 一 C:\Users\lilei\Desktop\HelloAPiCloud 一 APICloud Studio 2 
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AplCioud 文件 需 纪 豆 者 


到 APICloude Studio 2， 右 击 


吾 扰 ” 项 日 ”代码 千 举 ” 远 料 设备 扩 局 ” 完 口 区 助 


了 :{"10.1:8-.218"] 
基 1];10915 
扯 :- 


4。 湖上 氧 床 打 )iAppLoader 注目 定义 Apploader, 点 者 个 网 球 , 验 入 IP 开启 站 


证 杰 ,大 进行 NIFI 调试 。 


2 正 接 本 十 时 ,请 再 从 于 医 相 电 驮 ;还 授 的 基 直 员 淹 一 MIFT 焉 柱 器 。 
3。 从 妇 时 ,让 惟 在 系 拒 冰 大 靖 , 中 看 急用 了 APICloud Stodio 2 的 凤 络 壕 乱 ， 


图 1-15 




















“HelloAPICloud” 项 




















孙 ， 选择 
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习 1-14 所 示 )。 稍 等 片刻 ， 观 察 AppLoader， 这 个 测试 项 目 将 在 AppLoader 中 运行 起 来 。 













































































APICloud 支持 自动 同步 调试 ， 在 APICloud Studio 2 中 右 击 项 目 根 目录 ， 和 选择“WXIFI 自动 
步 ”( 如 图 1-14 所 示 ) 一 “打开 ”， 此 时 再 次 编辑 页 面 ， 效 果 会 实时 地 显示 在 测试 设备 上 。 
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1.2.5 编译 项 目 

APICloud 云端 支持 证 书 管理 和 云 编译 ， 可 以 快速 简单 地 编译 App。 在 Android 或 1OS 平台 
发 布 App 需要 各 自 的 签名 证 书 ， 对 于 Android 平台 ，APICloud 支持 在 云 平 台 上 一 键 制作 签名 了 
书 。 对 于 iOS 平台 ， 需 户 拥 有 Apple 开发 者 账户 ， 并 手动 完成 证 书 制作 。Apple 的 开发 者 由 
户 需 要 购买 ， 如 果 不 想 负担 此 项 支出 ， 建 议 使 用 Android 设备 ， 或 使 用 Android 模拟 器 。 
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1。. Android 证书 

在 网 站 控制 台 选 择 “HelloAPICloud” 项 目 ， 在 其 左 侧 列表 中 选择 “证 书 ”。 在 右 侧 页 面 

”一 栏 里 选择 右上 角 的 “一 键 创建 证 书 ”( 如 图 1-16 CA 此 时 会 出 现 一 个 输入 
E 完成 























































































































中 
| 





“Android 证 > 
栏 ， 输 入 完整 的 信息 后 点 击 “创建 和 保存 ” 即 可 完成 创建 (请 妥善 保管 这 些 信息 )。 创 
新 的 Android 证 书 就 被 应 用 了 。 
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所 GC | a 安全 | https//www.apicloud.com/certificate 妆 
~ HelloAPlCloud 我 的 账户 文档 在 经 社区 模块 Store 团队 协作 pomelo 
533 
Android 正 书 Android 答 全 证 号 高 达 及 售 用 流程 肆 当 奸 这 1 
om.pomelo.ji [| 
Android 这 马 
+ 
图 1-16 





















































的 证 书 ， 点 击 “Android 证 书 ” 一 栏 的 “更 新 ”一 “选择 证 书 ”， 上 传 自己 




















如 果 想 上 传 [= 
的 证 书 即 可 。 
































关于 Android 证 书 的 相关 内 容 可 参照 官方 文档 。 

















2. i0S 证 书 
参照 上 一 小 节 ， 在 证 书页 面 点 击 “iOS 证 书 ” 一 栏 的 “更 新 ”， 分 别 上 传 证 书 即 可 。 
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关于 iOS 证 书 的 相关 内 容 可 








照 官方 文档 。 
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3. 编译 项 日 






















































































在 网 址 控制 台 选 择 “HelloAPICloud” 项 目 ， 在 其 左 侧 列表 中 选择 “ 云 编译 ”。 可 在 这 个 页 
面 中 对 App 编译 平台 及 相关 配置 进行 设置 ， 这 里 以 Android 为 例 ， 类 型 选择 “正式 版 "。 点 击 最 



















































































2 A 


可 的 “ 云 编译 ”等 待 编译 完成 。 






















































































在 这 个 页 面 中 可 以 设置 App 所 需 的 权限 (如 位 置 、 摄 像 尖 和 通讯 录 等 )、 是 否 进行 代码 加 
密 、 版 本 信息 等 ， 这 些 功能 会 在 以 后 的 内 容 中 进行 介绍 。 





































































































































































































编译 完成 后 可 用 移动 设备 扫 码 下 载 ， 或 直接 点 击 下 载 按钮 安装 观看 效果 。 之 后 可 将 App 发 












































1.3 小 结 


通过 本 章 的 学 习 ， 读 者 应 该 已 经 对 APICloud 平台 、 学 习 资 源 、 控 制 台 操作 、 应 用 开发 流程 
了 基本 的 了 解 ， 在 后 续 章节 中 ， 就 可 以 一 步 步 眼 随 本 书 的 内 容 从 零 起 步 开发 一 款 App 了 。 
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搭建 App 整体 框 保 ， 完 成 App 静态 页 面 开发 


主要 内 容 
带领 并 教会 读者 使 用 APICloud 技术 实现 App 的 界面 布局 和 静态 页 面 的 编写 。 
学 习 目 标 
(1) 学 习 APICloud App 的 启动 过 程 ， 了 解 config.xml 配置 文件 。 
(2) 了 解 APICloud 五 大 布局 组 件 和 混合 泻 染 模式 。 
(3) 了 解 api 对 象 和 前 端 框架 。 
(4) 学 习 如 何 进行 屏幕 适 配 和 状态 栏 处 理 。 

























































































































































































































































































































































































通过 第 1 章 的 学 习 ， 相 信 读 者 已 经 对 APICloud 平台 及 其 开发 流程 有 了 基本 的 了 解 。 从 本 章 
始 本 书 将 带领 读者 从 零 起 步 款 App， 首 先 需 要 明确 本 书 第 一 部 分 要 带领 读者 一 起 开发 

一 款 什么 样 的 App。 

我 们 将 带领 读者 开发 一 款 O2O 类 型 的 电 商 App， 读 者 可 以 在 本 书 的 开源 仓库 ”中 下 载 这 个 
App 的 Android 和 iOS 安装 包 。 安 装 完毕 后 ， 运 行 这 个 App 体验 并 查看 功能 

在 开发 这 款 App 之 前 需要 先 做 一 系列 的 准备 工作 ， 内 容 包括 : 

二 需求 梳 = 输出 需求 说 明 x = 

。 UE 设计， 输出 产品 原型 ， 

。 UI 设计 ,输出 UI 效果 图 ， 
@ 开源 仓库 中 : 第 一 部 分 \ 示 例 项 目 资源 \ 程 序 包 。 
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和 2 章 搭建 App 整体 框架 ， 完 成 App 静态 页 面 开发 


























。 UI 架构 设计 ， 输 出 App UI 架构 设计 文档 ; 
。 功能 分 解答 出 App 功能 分 解 文档 ， 
。 开放 服务 选择 ， 输 出 第 三 方 服务 设计 文档 。 

































































读者 可 以 在 本 书 的 GitHub 开源 仓库 中 获得 相关 素材 和 帮助 。 因 为 在 本 书 讲解 过 程 












































































































































计 9、 功 能 架构 设计 、 开 放 服 务 选择 ©、 全 部 已 经 完成 的 静态 页 面 © 





接 使 用 这 些 资源 ， 读 者 需要 先 花 一 点 时 间 了 解 它们 : 需求 文档 只、 效果 图 与 切 图 2&、UI 架 构 设 
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一 些 其 他 参考 文档 如 : config.xml 配置 文件 文档 、 屏 幕 适 配 详解 、 扩 展 API (api 对 象 ) 文档 、 
APICloud 前 端 框架 文档 ， 可 以 在 官方 网 站 的 文档 页 面 被 找到 。 

























































































































































































开源 仓库 中 : 第 分 \ 示 例 项 目 资源 \ 需 求 说 明 \requirement-spec.xlsx。 
源 仓 库 中 : 第 分 \ 信 全 大 资源 \ 效 曙 到 与 切 图 。 
源 仓 库 中 : 第 分 \ 示 例 项 ww 架构 设计 \ui-architecture.xmind 。 
源 仓库 中 : 第 分 \ 示 例 项 架构 设计 \function-modules.xmind 。 
源 仓 库 中 : 第 分 \ 示 例 项 1 架构 设计 \service-modules.xmind。 
源 仓库 中 : 第 部分 \ 示 全 页 资源 \ 静 态 网 页 。 




















QQOOOOO 























2.1 局 动 


本 市 将 介绍 App 的 执行 流程 、 引 擎 初始 化 后 创建 的 UI 组 件 、config.xml 的 配置 和 两 个 重要 
的 事件 。 学 习 了 本 市 内 容 后 读者 会 对 App 的 启动 过 程 有 个 初步 的 了 解 。 


















































2.1.1 APICloud App 执 行 流程 


一 个 App 可 能 由 两 种 方式 被 启动 : 

































































。 户 手 动 启动 (如 点 击 App 图 标 ) ; 
。 被 其 他 App 调用 (如 通过 微 信 或 支付 宝 等 )。 



















































































App 启动 之 后 做 的 第 一 件 事 是 初始 化 引擎 ， 这 是 内 部 过 程 ， 开 发 者 不 必 深 究 ， 把 主要 概念 
学 会 就 可 以 了 。 初 始 化 过 程 如 图 2-1 所 示 。 












































EventQueue Init 


CommandQueue Init 


Main Cycie 


CS5 Parser 


Module Manager 


brid Render 
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QO ] 





图 2 一 1 














(1) 对 Widget 进行 初始 化 〈 见 2.1.2 小 节 )。 








(2) 对 Window 进行 初始 化 。 






































(3) 对 模块 管理 进行 初始 化 ， 关 于 模块 的 内 容 后 边 会 讲 ， 这 里 不 再 著述 。 










































































(4) 对 事件 队列 进行 初始 化 ，APICloud App 是 事件 驱动 的 ， 用 户 的 输入 都 会 以 事件 的 方式 
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进行 处 理 ， 此 外 App 内 部 也 会 触发 和 产生 事件 ， 事 件 通过 队列 进行 管理 。 



















































































(5) 对 命令 队列 进行 初始 化 ， 命 令 APICloud 内 部 产生 的 ， 每 个 扩展 API 的 调用 都 会 


产生 一 个 内 部 命令 。 













































































引擎 在 初始 化 完成 后 ， 进 入 等 待 状态 ， 对 随时 插入 的 用 户 操作 、 来 自 模 块 以 及 网 络 等 设备 
的 事件 或 命令 做 出 响应 。 























2.1.2 VWidget 和 Window 


APICloud 引擎 初始 化 时 会 创建 两 个 UI 组 件 实例 ， 它 们 分 别 是 Widget 和 Window (参照 2.1.1 
节 中 的 引擎 初始 化 步骤 )。 





























引擎 初始 化 时 会 创建 一 个 主 Widget 对 象 (Main Widget) ，Widget 是 APICloud App 运行 的 
最 小 单位 ， 也 就 是 说 APICloud App 想 要 运行 的 话 至 少 要 个 Widget 的 实例 。 一 般 来 说 ， 
一 个 App 包含 一 个 Widget 就 够 了 ， 此 时 可 以 把 这 个 Widget 看 作 这 个 App 本 身 。 在 存在 多 个 
Widget 的 情况 下 ， 最 先 初始 化 的 主 Widget 如 果 被 关闭 ， 整 个 App 将 会 被 关闭 。 























































































































之 后 会 在 主 Widget 中 创建 一 个 根 Window 对 象 (Root Window) ， 可 以 把 Window 理解 为 
一 个 独立 的 窗口 容器 ，Window 即 代表 设备 屏幕 ， 任 何 可 视 化 部 分 都 需要 装载 在 某 个 Window 
。 这 里 所 说 的 Window 是 对 移动 平台 原生 窗口 概念 的 封装 ， 可 以 提供 原生 的 性 能 。 这 个 根 
Window 之 后 会 装载 一 个 HTML 页 面 ， 也 就 是 应 用 打开 的 第 一 个 页 面 。 这 个 HTML 页 面 可 以 
通过 config xml 配置 :找到 项 目 根 目录 下 的 config.xml， 打 开 它 后 找到 <content srcr"index， 
html" /> 这 一 行 。 这 里 指定 的 index.html 会 被 装载 到 网 网 建 的 根 Window 中 。 实 际 二 引擎 
在 解析 content 标签 的 时 候 会 触发 一 个 content 事件 ， 它 的 参数 中 包含 index.html， 在 处 理 这 个 事 
件 时 index.html 就 被 装载 了 。 


2.1.3 App config.xml 配 置 文件 使 用 


在 引擎 初始 化 完成 之 后 ，App 会 去 解析 config.xml。 这 个 文件 在 项 目 根 目录 下 ， 它 其 中 包含 
很 多 重要 的 配置 信息 ， 并 且 它 会 在 App 的 编译 和 运行 时 被 使 用 ， 会 影响 整个 App 在 平台 上 的 
表现 ， 如 视觉 效果 、 权 限 、 性 能 等 。 一 些 APICloud 模块 也 会 从 config.xml 文件 中 获取 信息 。33 
于 这 个 文件 的 可 配置 项 可 参照 (http://docs.apicloud.com/Dev 一 Guide/app 一 config-manual)。 
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示例 如 下 ， 设 置 是 否 全 屏 运 行 : 

















<preference name="fullScreen" value="true|false" /> 


使 App 具有 拨打 电话 的 权限 : 















































<permission name="call" /> 
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配置 “QQ 登录 ”模块 的 相关 信息 : 


























<feature name="qq"> 
<param name="urlScheme" value="tencent123345678" /> 


<param name="apiKey" value="123345678" /> 
</feature> 


2.1.4 APICloud 引擎 的 两 个 重要 事件 


APICloud 引 警 初始 化 完成 后 会 发 出 两 个 重要 的 事 从 























证 









































e。 content 事件 ， 人 参照 2.1.2 节 中 对 content 事件 的 描述 ; 


。 abiready 事件 ， 这 个 事件 是 在 api 对 象 准备 完成 后 产生 的 。 
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应 该 在 页 面 的 JavaScript 代码 中 注册 “apiready” 
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<script type="text/javascript"> 
apiready = function(){ 
//TODO 
} 


/seript> 


2.2 APICloud 应 用 设计 思想 







































































APICloud 应 发 虽然 使 用 标准 的 Web 技术, 但 是 与 其 他 Web 产品 采用 B/S 架构 不 同 
APICloud 应 用 采用 的 是 完整 的 Client/Cloud 架构 ， 即 前 后 端 分 离 的 架构 。App 中 所 在 
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的 网 页 文 














牛 都 是 存放 在 App 本 地 的 ， 只 有 数据 需要 从 服务 端 获 取 。 





Pe 












































到 2-2 所 示 是 APICloud 应 











的 整体 架构 设计 ，APICloud 的 应 用 设计 思想 是 采用 完整 的 
Client/Cloud 架构 ， 在 移动 端 实现 界面 和 功能 ， 在 服务 器 端 提供 数据 和 服务 。 其 实 前 后 端 分 离 的 
架构 设计 ， 不仅 是 APICloud 应 用 的 设计 思想 ， 也 是 Android 和 iOS 原生 App 的 设计 思想 。 这 样 
设计 的 好 处 是 所 有 的 界面 布局 和 功能 实现 都 是 在 App 本 地 完成 的 ， 不 需要 依赖 网 络 。 当 用 户 点 
击 交互 的 时 候 ，App 会 直接 打开 本 地 界面 展示 和 调用 本 地 API 实现 ， 不 需要 像 B/S 架构 那样 
待 服务 端 返回 远程 页 面 之 后 再 演 染 展示 ， 用 户 体验 更 好 ， 交 互 响应 更 快 
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在 移动 互联 网 时 代 ， 终 端 产品 有 很 多 种 类 。 对 于 不 同类 型 的 客户 端 ， 服 务 端 对 外 提供 的 数 
据 和 服务 其 实 是 一 样 的 : 通过 统一 的 API 接口 对 外 提供 。 在 客户 端 以 产品 为 导向 设计 界面 ， 根 
据 不 同 产品 形态 的 特点 进行 界面 和 功能 的 定 条 
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APICloud 的 应 用 开发 使 用 的 就 是 这 样 一 个 完整 的 前 后 端 分 离 架 构 ， 在 App 端 实现 界面 和 功 
能 ， 在 服务 器 端 提 供 数 据 和 服务 ， 本 书 的 示例 项 目 也 会 为 读者 演示 这 样 的 一 个 架构 。 
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2.3 界面 和 导航 


在 了 解 APICloud 应 用 的 Client/Cloud 架构 设计 之 后 ， 接 下 来 一 个 非常 重要 的 工作 就 是 进行 
App 的 UI 架构 设计 。 一 个 原生 应 用 ， 无 论 是 Android 还 是 iOS 的 应 用 ， 都 是 由 很 多 不 同 的 窗 
组 成 的 ， 窗 口 是 App 界面 展示 的 最 小 单位 ， 通 过 一 个 个 窗口 的 跳 转 和 切换 使 整个 App 的 界面 和 
功能 展示 出 来 。 





























































































































































































































































































































但 是 ， 通 常 在 使 用 HTMLS5 实现 的 WebApp 中 ,很 多 是 SPA 模式 的 单 页 面 应 用 ， 即 
过 div 的 切换 来 实现 界 而 切换， 或 是 通过 标签 来 实现 页 面 的 处 转 。 无 论 是 哪 和 方式， 部 不 是 
App 想 要 的 体验 和 界面 切换 效果 。 所 以 在 使 用 HTMLS5 技术 开发 App 的 时 候 (注意 不 是 开发 
WebApp) ， 不 管 使 用 什么 样 的 平台 或 者 框架 ， 也 不 管 选 择 的 是 哪 家 厂商 ， 不 同 的 跨 平 台 产 品 都 
一 套 自己 的 UI 组 成 结构 。 
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前 Hybrid (混合 ) 的 开发 模式 已 经 是 非常 主流 的 App 开发 模式 ， 包 括 “BAT” 及 很 多 一 
线 互 联网 公司 ， 他 们 的 主要 App 产品 都 是 使 用 混合 技术 开发 ， 例如 : 微 信 、 手 机 QQ、 支 付 宝 、 
手机 淘宝 、 天 猫 、 京 东 、 美 团 、 大 众 点 评 、58 同城 等 。 只 不 过 这 些 大 公司 都 套 符 合 自己 
业务 特点 的 跨 平 台 技术 ， 用 于 实现 自己 的 App 开发 。 而 APICloud 是 一 个 面向 所 有 开发 者 ， 能 够 
支持 各 种 类 型 应 发 的 跨 平台 产品 。 
2.3.1 APICloud 应 用 的 UI 组 成 结构 
使 用 HTML5 技术 在 APICloud 平 台 上 开发 款 App，App 的 UI 组 成 结构 需要 使 





























APICloud 界面 布局 的 5 大 组 件 来 进行 操作 。 















































如 图 2-3 所 示 ， 这 是 APICloud 应 用 的 UI 组 成 结构 。 一 个 APICloud 应 用 可 以 包含 Widget、 


Layout、Window、Frame 和 UIModule 这 5 种 UI 类 型 的 组 件 先是 Widget，Widget 当 
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可 以 包含 Layout、Window 和 UIModule ; 在 Window 当中 ， 也 可 以 包含 Layout、Frame 和 
UIModule ; Layout 当中 可 以 包含 Window 和 Frame ; Frame 当中 只 能 包含 UIModule。 
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对 于 一 款 App， ~ 第 它 凯 | 个 村 日 还 是 数 个 界 
行 布局 。 下 面 介绍 一 下 APICloud 界面 布局 的 五 大 组 件 。 


， 都 要 





APICloud 的 这 5 大 组 从 
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2.3.2 APICloud 界 面 布局 5 大 组 件 


APICloud App 的 UI 由 5 大 组 件 组 成 ， 每 类 组 件 都 有 一 组 API 进行 控制 。 下 面 将 对 这 些 
的 API 进行 介绍 ， 关 于 它们 的 详细 用 法 可 参考 定 方 网 站 中 关于 api 对 象 的 文档 页 面 。 
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1. Widget 






































Widget 是 APICloud 应 用 运行 管理 的 最 小 单位 ， 每 一 个 APICloud 应 用 至 少 包 含 一 个 
Widget， 每 一 个 Widget 都 具有 独立 的 代码 、 资 源 和 系统 ，Widget 之 间 可 以 相互 调用 。 
Widget 在 UI 上 表现 为 一 个 独立 的 窗口 容器 ， 内 部 可 以 包含 Layout、Window 或 UIModule， 
同一 时 刻 ， 应 用 中 只 能 有 一 个 Widget 在 界面 上 显示 。 其 相关 API 如 下 。 





















































































































































































































































e 打开 Widget : api.openWidget () 。 
e 关闭 Widget : api.closeWidget () 。 


2. Layout 


Layout 骨 在 实现 某 一 种 特定 的 布局 效果 ， 通 过 定义 好 的 布局 组 织 一 组 Window 或 Frame 来 
完成 整体 的 界面 布局 效果 。 每 一 个 Layout 内 部 均 可 包含 Window 和 Frame。 













































































e 打开 FrameGroup : api.openFrameGroup () 。 


e 关闭 FrameGroup : api.closeFrameGroup () 。 
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3. Window 








Window 是 一 个 独立 的 Native 


组 件 ， 每 一 个 App 都 是 由 多 个 Windo 




































































(Android 或 iDOS) ， 是 APICloud 应 用 界面 布局 的 洗 
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本 
w 组 成 的 。Window 所 承载 的 内 容 由 其 所 加 载 的 HTML 页 
下 决定 。 每 一 个 Window 都 是 一 个 独立 的 Web 容器 ， 有 其 独立 的 DOM 树 结构 ， 并 且 可 以 独立 











































































































Layout、Frame 和 UIModule。 














进行 泻 染 。Window 的 起 点 位 于 屏幕 左上 











e 打开 Window : api.openmin() 。 


e 关闭 Window : api.closeWin () 


4. Frame 


o 








Frame 是 一 个 独立 的 Native 视图 






































， 宽 高 占 满 屏幕 ， 不 可 修改 。Window 内 部 可 以 包含 

















(Android 或 1OS) ， 与 Window 类 似 ，Frame 所 承载 的 内 




















容 由 其 所 加 载 的 HIML 页 面 决 定 。 每 一 个 Frame 都 是 一 个 独立 的 Web 容器 ， 有 其 独立 的 DOM 



























































树 结构 ， 并 且 可 以 独立 进行 浑 染 。Frame 的 位 置 
，Frame 内 部 可 以 包含 UIModule。 























个 子 视图 ， 租 入 到 Window 或 Layout 





























e 打开 Frame : api.openFrame() 。 


e 关闭 Frame : api.closeFrame () 。 


5. UIModule 




















UI 模块 组 Native 的 视图 组 成 ， 旨 



























































和 宽 高 可 通过 参数 进行 配置 。Frame 通常 作为 




































































在 实现 某 种 特定 的 UI 界面 效果 ， 可 以 是 全 屏 展示 也 









































可 以 只 是 局 部 区 域 。 每 一 个 UI 模块 都 具 
























































四 



























































独立 的 生命 周期 、 界 面 布局 、 事 件 管理 和 数据 交 




















互 。UI 模块 通常 需要 舱 入 到 Window 或 Frame 








e 加载 UIModule : api.require()， 














。 打开 UIModule (以 UIScrollPicture 为 例 ): UIScrollPicture.open () 


























使 用 
大 仆 。 


o 





e。 关闭 UIModule (以 UIScrollPicture 为 例 ): UIScrollPicture.close()， 


2.3.3 ”APICloud 混 合演 染 模 式 


APICloud 为 什么 要 有 Widget、Layout、 
















































































合演 染 技 术 的 原理 。 

















接 使 用 HTML5 进行 布局 呢 ? 这 五 大 组 们 





如 图 2-4 所 示 ， 这 是 标准 浏览 器 的 泻 : 






































一 个 HTML 页 面 是 由 很 多 标签 组 成 的 。 

















染 机 制 。 忌 体 来 说 ,浏览 器 的 泻 染 机 种 



































会 生成 一 柠 DOM 树 ， 在 DOM 树 























会 根 和 





Window、Frame 和 UIModule 这 5 大 组 件 ， 而 不 是 
的 作用 又 是 什么 呢 ? 这 就 需要 讲解 一 下 APICloud 混 



























































j 是 单 层 泻 染 ， 

















浏览 器 会 对 标签 进行 解析 (parse) ， 解 析 完 成 后 
示 签 生 成 对 应 的 元 素 (element) ， 然 后 浏览 器 会 对 
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DOM 树 进行 布局 (layout)。 布 局 过 程 会 对 整个 DOM 树 进 行 遍历 ， 这 个 过 程 会 结合 元 素 的 类 型 
和 代码 中 的 CSS 样式 ， 生 成 一 棵 layout 树 。 这 个 layout 树 上 的 节点 就 是 一 个 个 块 (block) ， 每 
个 block 有 自己 的 宽 高 、 样 式 、 位 置 和 颜色 等 属性 。 接 下 来 就 要 对 layout 树 进行 演 染 (render) ， 
泻 染 过 程 会 把 layout 树 上 的 节点 ， 创 建 为 内 存 里 的 buftsr， 然 后 再 画 到 一 张 image 上 ， 再 将 这 张 
image 贴 到 屏幕 上 ， 这 样 就 可 以 看 到 浏览 器 泻 染 出 的 界面 了 。 
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二 





虽然 HIML5 和 CSS3 定义 了 一 些 新 的 标签 和 特性 ， 像 video 标签 或 是 一 些 CSS3 的 动画 ， 
在 实现 的 指导 标准 上 ， 要 求 浏览 器 对 这 些 标签 独立 泻 染 ， 也 就 是 说 在 整个 layout 树 上 ， 要 根据 
元 素 类 型 不 同 生成 很 多 的 子 树 ， 然 后 再 对 这 个 子 树 做 分 层 的 独立 这 染 。 虽 然 HIML5 也 认识 到 
了 浏览 器 单 层 这 染 所 存在 的 问题 ， 也 提出 这 样 一 个 分 层 的 概念 ， 但 是 浏览 器 的 绘制 方式 还 是 
在 引擎 内 部 调用 平台 的 2D 或 3D 的 接口 来 进行 绘制 的 ， 跟 通常 原生 应 用 的 绘制 方式 还 是 不 
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所 示 ， 这 是 一 个 原生 的 应 用 ， 它 是 由 很 多 层 组 成 的 ， 大 到 一 个 Window， 小 到 
一 个 导航 栏 、 栏 、 按 钮 ， 甚 至 一 个 文本 杠 ， 每 一 个 都 是 独立 的 组 件 。App 在 进行 绘制 的 时 
候 ， 只 需要 调用 不 同 的 组 件 布局 就 可 以 了 ， 组 件 和 组 件 之 间 是 完全 独立 的 。 如 果 对 某 个 组 件 做 
一 个 动画 ， 或 者 数据 更 新 ， 只 要 直接 找到 这 个 组 件 ， 修 改 这 个 组 件 的 值 就 可 以 了 ， 它 并 不 存在 
DOM 树 、layout 树 这 样 的 生成 过 程 。 所 以 对 于 一 个 原生 应 用 ， 用 户 进行 点 击 交互 的 时 候 ， 或 
执行 一 个 动画 的 时 候 ， 它 比 浏览 器 这 种 单 层 的 泻 染 速度 要 快 很 多 ,这 也 就 是 为 什么 在 演 染 层面 
上 Native 实现 的 效果 要 比 HTML5 实现 的 效果 体验 要 好 很 多 的 原因 。 
























































































































































































































































































































































































































































APICloud 开发 应 用 的 理念 是 通过 HTML、CSS、JavaScript+APICloud 扩展 API 的 方式 来 进 
行 的 。 以 这 种 简化 的 技术 开发 ， 但 同时 要 保证 开发 的 App 的 功能 、 性 能 和 体验 ， 能 够 达到 原 
E 的 要 求 。 所 以 ,一 个 非常 关键 的 因素 就 是 APICloud 引擎 支持 Native+HTML5 的 混合 泻 染 。 
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APICloud 通过 5 大 组 件 对 整个 App 的 UI 结构 进行 了 定义 ， 在 这 染 机 制 










































































染 一 致 ， 并 且 支 持 Native 和 HIML5 的 混合 泻 染 ， 从 而 保证 用 APICloud 
和 体验 。 

















图 2 一 5 


2.3.4 查看 APICloud 引擎 api 对象 功能 










































































api 对 象 是 APICloud 在 全 局 作用 域内 唯一 的 一 个 扩展 对 象 〈 在 脚本 

















接 调用 api 下 的 












































方法 ) ，api 对 象 是 APICloud 引擎 的 核心 对 象 ， 包 含 发 一 款 App 到 
















































































到 的 











取 基础 功 能 ? abl 


对 象 无 需 引 入 ， 可 以 直接 使 用 。APICloud 的 扩展 模块 ， 都 需要 通过 api.require () 方法 引入 





























后 才能 使 用 。 下 面 的 代码 实现 了 拨打 电话 的 功能 : 






































<script type="text/javascript"> 
apiready = function(){ 
Pi call 
type:"tel", 
number:"00000000000™" 
}) 
} 


</script> 


























这 里 将 一 个 匿名 函数 注册 给 apiready， 在 App 启动 后 ，apiready 被 调 
的 call 方法 来 拨打 电话 。 
















































































如 发 者 想 打 个 Window， 参 照 下 面 的 代码 : 


























<script type="text/javascript"> 
apiready = function(){ 




















。 函 数 内 执行 api 下 


api.openWin({ 
name: "my", 
url:'./html/my.html' 
}) 
' 
</script> 




















api 对 象 下 包含 引擎 的 很 多 
可 以 完成 简单 App 的 开发 ， 所 以 api 对 象 下 的 方法 涉及 功能 旋 围 很 广 ， 包 括 应 用 管理 、 系 
统 、 消 息 事 件 、 网 络 通信 、 数 据 存储 、 设 备 访问 、 多 媒体 、 对 话 框 、 模 块 加 载 等 。 同 时 ，api 对 
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// 这 个 被 打开 的 window 的 名 字 ， 以 后 可 以 通过 这 个 名 字 操 作 这 个 Window 
// 这 个 Window 的 HTML 文 件 









































通过 api.openWin() 可 以 实现 Native 过 渡 动 画 的 窗口 跳 转 ， 这 是 很 常用 的 一 个 功能 。 






























































属性 和 常量 。 在 设计 之 初 ， 我 们 希望 开发 者 仅 靠 使 用 api 对 象 就 


三 

































































































































































象 下 的 方法 通常 都 是 实现 一 些 轻 量 级 功能 的 ， 如 文件 操作 、 音 视频 播放 、 对 话 框 等 ， 但 是 涉及 
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和 FE 和 界面 展示 就 需要 


怀 





2.3.5 屏幕 适 配 


加 载 相关 的 模块 来 实现 。 






































在 进行 屏幕 适 配 时 ， 通 常 要 在 每 个 HTML 页 面 的 <head></head> 标签 中 添加 <meta name= 
































"viewport"content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,initial— 


scale=1.0,width=device-width"/>。 这 行 代码 在 创建 项 目 和 文件 模板 的 时 候 会 被 自动 添加 ， 如 

















































































































录 下 html 文件 夹 中 的 main.html 文件 ， 它 的 作用 是 声明 该 HTML 页 面 执 行 时 的 泻 染 区 域 宽 

































































页 时 可 以 用 两 个 手指 进行 缩 











根 
度 为 设备 的 屏幕 可 视 区域 ， 不 做 任何 缩放 ， 同 时 禁用 缩放 功能 (默认 情况 下 在 移动 设备 上 浏览 
网 





















































放 ) ， 保 证 同 原生 应 用 一 致 的 体验 。 


































































































































































































在 制作 UI 效果 图 的 时 候 推荐 使 用 720 x 1280 分 辨 率 作为 设计 稿 的 基准 尺寸 ， 页 面 布 局 时 优 
先 考 虑 像素 (px) 单位 ， 碰 到 困难 的 效果 时 可 考虑 em 与 rrm。 在 写 代码 时 要 将 效果 图 的 尺寸 除 
以 屏幕 倍率 (例如 720 x 1280 的 屏幕 倍率 通常 为 2) ， 例 如 一 个 宽度 为 200 px 的 图 片 通常 要 写作 








<img style="width:100px; 


2.3.6 前端 框 架 

































































nm src="..."> 


o 















































APICloud 提供 了 前 端 框架 来 加 速 前 端 开 发 ， 前 端 框架 提供 了 常用 的 dom 操作 封装 和 css 














样式 ， 它 开源 在 GitHub 上 %， 





















































保存 在 项 目 根 目录 下 的 script/api.js 和 css/api.css 中 。 前 

















端 框架 通过 $api (和 之 前 的 
它 比 jQuery 简单 得 多 。 例 丸 





























,AA 本 


api 不 同 ) 访问 。 它 非常 简单 ， 如 果 读 者 使 用 过 jQuery 会 发 现 
中 可 以 使 用 $api.pyId('xxx7) 来 根据 id 获取 dom 元 素 ，$api. 












































































































































trim(`xxx’) 可 以 去 除 字 符 串 





尾 的 空白 字符 等 。 这 里 不 建议 开发 者 在 APICloud App 的 页 面 





























[sy 





























引入 jQuery 等 大 型 框架 ， 因 为 每 个 页 面 是 独立 的 ， 框 架 需 要 在 每 个 页 再 











低 App 性 能 。 


















































行 初 始 化 ， 这 会 降 


和 1 



































@ 在 GitHub 搜 索 “apicloud-js-famework”。 
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下 面 的 代码 将 id 为 “main” 的 dom 元 素 的 内 容 设 








为 “Hello APICloud”， 示 例如 下 : 





<script type="text/javascript"> 
apiready = function(){ 
$api.html( 
$api.byId("main"), 
"Hello APICloud" 
); 
} 
</acript> 


2.3.7 状态 栏 处 理 


沉浸 式 状态 栏 如 图 2-6 所 示 。 左 侧 屏幕 顶端 状态 栏 为 非 沉浸 状态 ， 状 态 栏 与 App 互相 分 离 。 
三 侧 屏幕 项 端 状 态 栏 背景 与 App 融合 ， 为 沉浸 状态 。 

































































WHAT INEED TO 00 


Lunch at Travelors coftee wi... 


1300 Greg 


i100 


See all my todos 


TODAY'S PROJECTS 





图 2-6 





























想 要 开启 状态 栏 沉浸 模式 需要 完成 以 下 两 个 步 又 : 


开 





(1) 修改 config.xml, 实现 代码 <preference name="statusBarAppearance" value= 
i Be A ; 


























一 、 
Le 
~ 一 
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/ 





面 顶端 元 素 使 用 $api .fixstatusBar () 。 

































































对 为 开启 沉浸 状态 后 ， 页 面 会 深入 到 状态 栏 下 方 ， 此 时 如 果 有 页 面 元 素 显示 在 顶端 则 会 被 
遮挡 。 对 被 遮挡 的 元 素 调 用 $api .fixstatusBar() 会 为 这 个 元 素 添 加 padding-top 样式 。 其 值 
对 于 不 同 运 行 平台 有 所 不 同 ， 开 发 者 不 用 考虑 这 些 细节 ， 代 码 如 下 : 










































































































































































<script type="text/javascript"> 
apiready = function(){ 
$api.fixSstatusBar( 
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S$api.byId("headqer" 
); 

} 

</script> 





Ba 









































还 可 以 通过 api.setStatusBarStyle() 来 设置 状态 栏 的 样式 ， 它 支持 iOS、 小 米 
MIUI6.0 及 以 上 手机 、 魅 族 Flyme4.0 及 以 上 和 手机， 以 及 其 他 Android6.0 及 以 上 手机 : 






































api.setStatusBarStyle ({ 
style: '1ight'，// 可 选项 , Light( 状 态 栏 字体 为 白色 , 适用 深 色 背景 ).dark( 状 态 栏 字体 为 黑 
默认 Light 
color:'#000" // 可 选项 ， 状 态 栏 背景 颜色 ， 只 Androiqd 5.0 及 以 上 有 效 ， 默 认 #000 

]) 









































| 
EB 


， 适 用 浅 色 背景 )， 




















2.3.8 iPhone X 的 状态 栏 处 理 


针对 iPhone X 的 特殊 造型 ，Apple 为 了 方便 开发 者 对 iPhone X 进行 适 配 ， 在 iOS 11 中 引入 
了 Safe Area 的 概念 。APICloud 端 引擎 也 在 api 对 象 下 添加 了 safeArea 属性 和 safeareachanged 
EE 要 的 元 素 需 要 在 安全 区 域 以 内 ， 避 免 被 遮挡 。 
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内 帕 













































































对 于 大 多 数 应 用 ， 通 过 以 下 几 步 基本 就 可 以 完成 Phone X 的 适 配 ， 其 他 的 特殊 情况 如 横竖 
屏 切换 等 则 需要 结合 使 用 场景 进行 处 理 。 








































































































于 让 hone X 顶部 的 形状 特殊 ， 状 态 栏 高 度 不 再 是 以 前 的 20 px， 而 是 变 成 了 44 px， 如 果 


应 用 开启 了 沉浸 式 效果 ， 那 么 页 面 顶部 会 被 遮 住 部 分 ， 如 图 2-7 所 示 。 




























































































为 了 解决 这 个 问题 可 以 修改 $api 下 的 fixIos7Bar () 方法 和 fixstatusBar() 方法 ， 代 码 如 下 : 


$api.fixIos7Bar = function(el){ 
return u.fixstatusBar (el); 
}; 
$api.fixSstatusBar = function (el){ 
if(!$api.isElement (el)){ 
console.warn('$api .fixStatusBar Function need el param, el param must be DOM Element'); 
return 0; 





} 
el.style.paddingTop = api.safeArea.top + 'px'; 
return el.offsetHeight; 

}; 


























上 
雪 











这 里 了 api.safeArea 来 获取 设备 的 安全 显示 区 域 。 


















































到 2-7 可 以 看 到 ， 页 面 底部 的 标签 栏 也 被 虚拟 Home 键 遮 挡住 了 部 分 。 对 于 虚拟 Home 
键 ， 可 以 通过 openWin() 和 setWinAttr() 方法 的 hideHomeIndicator 参数 来 控制 其 显示 或 
隐藏 ， 这 对 于 沉浸 式 体 验 较 高 的 场景 很 (比如 观看 视频 )。 而 一 般 的 页 面 通常 做 法 是 避 开 虚 
拟 Home 键 ， 这 里 参考 header 的 处 理 ， 在 apijjs 中 添加 一 个 fixTabBar() 方法 ， 代 码 如 下 : 















































































































































































































































D0000000000000 https//yabook.org 




















36 ”第 2 章 搭建 App 整体 框架 ， 完 成 App 静态 页 面 开发 




















$api.fixTabBar = function(el)t{ 
if(!$api.isElement (el)){ 
console.warn('S$api.fixTabBar Function need el param, el param must be DOM Element'); 
return 0; 
} 
el.style.paddingBottom = api.safeArea.bottom + 'px'; 
return el.offsetHeight; 
} 














// 调用 的 时 候 使 


$api.fixTabBar (element) 




















这 样 就 可 以 适 配 iPhone X 了 ， 如 图 2-8 所 示 。 











[ET 全 | 


端 API 





现在 新 建立 的 项 目 中 S$Sapi.fixStatusBar () .$api.fixIos7Bar () 和 $api.fixTabBar() 函数 
已 经 适 配 了 iPhone 义 。 如 果 开 发 者 使 用 较 早 创建 的 项 目 可 按照 前 面 讲 到 的 方法 进行 适 配 ， 也 可 
以 参考 apijs 中 沉浸 式 效果 的 适 配 原理 ， 编 写 符合 自己 开发 习惯 的 代码 进行 适 配 。 
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2.3.9 优化 点 击 事件 和 tapmode 


导致 移动 端 HIML 页 





























于 Webkit 内 核 




















身 的 实现 机 制 ，DOM 元 素 标准 





的 onclick 事件 存在 300 ms 的 响应 延迟 ， 





















































速 的 点 了 


api.Parse] 

















候 会 有 300 ms 的 延迟 。 为 了 解决 这 个 问题 ， 提 供 快 





























盏 在 处 理 点 击 事件 的 时 





























性 。 例 如 : 











十 响应 ， 需 要 在 点 击发 生 的 








元 素 上 添加 tapmode 届 























如 果 动 态 创建 了 包含 tapmode 的 元 素 ， 之 后 需要 调用 下 再 


Tapmode () 


<div tapmode onclick="goBack()"> 返 回 </div> 





























的 代码 使 之 生效 : 


































































































tapmode 属性 是 APICloud 定义 的 私有 属性 ， 于 消除 DOM 元 素 的 点 击 延 迟 。 另 外 ， 
tapmode 属性 支持 赋值 CSS 样式 及 动态 改变 元 素 样式 ， 实 现 Native 的 点 击 效果 。 例 如 : 


<dq 























iv class="btn" 




















tapmode="btn-press" onc 




















1ick="goBack()"> 返 回 </div> 




















“btn 一 press” 样 式 























” 按 和 





被 用 户 点 击 、 














处 于 按 下 状态 时 ， 此 DIV 元 素 将 合 加 使 



































即 移 除 “btn 一 press” 


























当 用 户 导 


手指 离 














设 





计 





FD 后 > 此 DIV 元 素 的 样式 将 恢 至 默认 ， 








静态 页 面 中 建议 遵循 的 布局 方法 






















































































局 方法 。 


如 header、nav、section、height、foocoter。 








忆 
辣 。 





每 




































































= 于 o 


,， VN 100%、 flex X、auto 
勾 、Px、 































































































box-sizing， 例 如 box-sizing: border-box。 

















在 进行 静态 页 面 布局 时 建议 遵循 如 下 布 

。 使 用 HIML 语义 化 标签 ， 

。 采用 弹性 响应 式 布局 ， 配 合流 式 布 

。 宽度 使 用 具有 自 适 应 特征 的 数值 

。 高 度 优先 使 用 px 单位 布局 。 

。 结合 CSS3 的 特性 ， 如 设 

e。 采用 绝对 定位 ， 如 position:absolute。 























使 用 弹性 盒子 (flexbox) 布 
display: -webkit-box 
display: -webkit-flex 


display: flex 


-webkit-box-orient : 
-Webkit-flex-flow: 


vertical 
column 


0 


局 则 推荐 用 兼容 性 











引 法 ， 代 码 如 下 : 
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flex-flow: column 


—webkit-blox-orient: horizontal 
-webkit-flex-flow: row 
flex-flow: row 


—webkit-box-flex: 1 
-webkit-flex: 1 
flex:; 1 


2.4 搭建 App 整体 框架 ， 完 成 App 静态 页 面 开 发 


本 节 将 带领 读者 创建 App 的 整体 









































TH 











架 并 学 习 如 何 进 行 静态 页 面 的 开发 。 




















2.4.1 创建 首页 的 标题 栏 和 Tab 标签 组 


首先 请 利用 第 1 章 学 到 的 内 容 创 建 本 书 的 示例 App， 并 将 它 检 出 到 开发 环境 中 (这 里 使 
APICloud Studio 2) ， 名 称 和 说 明 可 随意 填写 。 







































































































































































从 结构 上 来 看 ， 首 页 显示 在 一 个 Window 中 ， 这 个 Window 包含 顶端 的 标题 栏 ( 左 侧 的 城 
市 选择 框 ， 中 间 的 logo， 右 侧 的 个 人 信息 图 标 ) 与 Tab 标签 组 (“水 果 ”“ 食 材 ”“ 零 食 *“ 牛 奶 ” 
和 “蔬菜 ”) ， 中 间 是 具体 的 Tab 页 显示 区 域 ， 页 面 的 左下 角 有 一 个 悬浮 的 购物 车 信息 栏 ， 如 
到 2-9 所 示 。 






































































































































































































































顶端 的 标题 栏 和 Tab 标签 组 属于 当前 Window。 中 间 的 Tab 页 内 容 放 在 Frame 中 ， 这 里 需 


要 5 个 Frame 来 实现 滑动 切换 的 效果 ， 这 个 功能 可 以 使 用 FrameGroup( 一 种 Layout) 完成 。 芒 浮 
的 购物 车 信息 栏 是 一 个 单独 的 Frame。 

















































































































































































































丸 为 config.xml 中 配置 了 默认 启动 页 面 是 根 目录 下 的 index.html， 所 以 修改 这 个 index.html。 
将 <style/> 标签 中 的 样式 与 <zbody/> 标签 中 的 元 素 删 除 ， 再 将 JavaScript 代码 apiready 函数 
的 内 容 删 除 。 之 后 将 html 文件 夹 下 的 main.html 文件 删除 ， 右 击 html 文件 来， 选择 “新 建 
APICloud 模板 文件 ”， 在 html 文件 夹 下 建立 一 个 新 的 main.html。 这 样 就 拥有 一 个 空白 的 App 框 
架 了 。 





































































































































































































现在 使 用 在 第 1 章 中 学 到 的 内 容 ， 在 手机 或 模拟 器 上 建立 调试 环境 ， 以 便 完 成 接 下 来 的 开发 。 
















































































将 本 书 开 源 仓库 中 第 一 部 分 \ 示例 项 目 \ 切 图 中 image 文件 夹 下 的 文件 全 部 复制 到 项 目 根 


录 下 的 image 文件 夹 中 ， 以 后 会 用 到 这 些 图 片 进行 开发 。 




















































































































I 





























2.4 

















App 启动 后 
录 下 的 index.html。 








api.openWin({ 












































在 index.html 的 apiready 国 数 


name: "mainy'yv 
Wri EL mL 
slidBackEnabled: false 
}); 
在 html/main.html 














的 <pody/> 标签 之 间 


展示 的 第 一 个 界 
下 面 操作 会 实现 这 个 功能 。 














添加 以 下 代码 : 














搭建 App 整体 机 


面 就 是 main.html， 需 要 将 html/main.html 

























































































运行 测试 后 看 











小 鲜 和 大 检 子 和 你 一 起 


语 南 脐 榨 
只 产 竣 不 能 


¥169 





a 


找 对 象 


佳 沛 绿 奇异 里 


四 川 五 柑 
Hn 茂 12 
¥249 











到 页 而 








VAAN 








“启动 完成 ” ， 说 明 一 切 1 





添加 “ 





启动 完成 ”以 便 测试 





























， 完 成 App 静态 页 再 39 
作 首 页 而 不 是 根 目 
2-10 所 示 。 





之 后 将 “html/main.html” 





图 2-9 


图 2-10 























“html/main.html” 








。 接 























的 <body> 标签 


次 
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搭建 App 整体 框 


























架 ， 完 成 App 静态 页 

















发 











header 部 分 。 编 辑 这 个 文件 





<header id="header"> 
<div class="left"> 
<div class="arrow" 
<div class="city" 
</div> 
<div class="center"> 








， 在 <body/> 标签 





提 


id="arrow"></div> 
id="city"> 北 京 市 </div> 





</div> 


<div class="right"></div> 


</header> 




















扣 


在 <style/> 标签 





header { 
width: 100%; 
height: S50Opx; 


background-color: #e 


header .left { 
position: absolute; 
bottom: 0; 
left: 0; 
width: 100px; 
height: S50px; 


header .left 
position: 
bottom: 
left: llipx; 
width: 
height: 8px; 
background: 
background-size: 


.arrow { 
absolute; 
21px; 


13px} 


background-position: 
background-repeat: 
-webkit-transition: 


transition: 200ms; 


header .left 
—webkit-transform: 
transform: 


.left 
Position:s 


header OE 寺 
relative; 
z=1idexs 2 
width: 100%; 
height: S50Opx; 
padding-left: 
line-height: S50Opx; 
font-size: 14px; 
Color: #fff; 


27px; 


header .center { 


8 入 以 下 代码 : 


1017e; 


url(../image/arrow_down.png); 
13px 8px; 


center center; 


no-repeat; 
200ms; 


.arrow.active { 
rotate(l80deg); 
rotate (180deg); 


入 以 下 代码 : 

















发 





2.4 搭建 App 整体 框架 ， 完 成 App 静态 页 




















width: 100%; 

height: S50Opx; 

background: url(../image/home title.png); 
background-size: 74px 19px; 
background-position: center center; 
background-repeat: no-repeat; 


header .right { 
position: absolute; 
bottom: 0; 
Flights 03 
width: 40px; 
height: S50px; 
background: url(../image/home membercenter.png); 
background-size: 30px 30px; 
background-position: center center; 
background-repeat: no-repeat; 








































































































此 时 可 以 在 测试 环境 到 需要 实现 的 header 部 分 了 ， 这 里 在 设置 元 素 尺 寸 时 使 用 了 效 






































尺寸 除 以 2 的 算法 ， 如 图 2-11 所 示 。 












































注意 header .left .arrow.active 这 个 样式 ， 在 城市 列表 打开 状态 时 ， 只 要 给 箭头 图 标 











active 类 就 可 以 实现 旋转 动画 了 。 





接 下 来 实现 Tab 标签 组 ， 在 <body/> 标签 内 <header/> 标签 的 下 方 添加 以 下 代码 : 





<nav id="nav"> 
<div class="menu selected"> 水 果 </div> 
<div class="menu"> 食 材 </div> 
<div class="menu"> 零 食 </div> 
<div class="menun> 牛奶 </div> 
<div class="menu"> 蔬 菜 </div> 
</nav> 




















在 <style/> 标签 中 继续 添加 以 下 代码 ; 








nav { 
display: -webkit-box; 
display: -webkit-flex; 
display: flex; 
—webkit-box-orient: horizontal; 
—webkit-flex-flow: row; 
flex-flow: row; 
position: relative; 
height: 40px; 
background-color: #el01l7e; 


nav .menu { 
—webkit-box-flex: 1; 
—webkit-flex: 1; 
flex: 1; 


D0000000000000 https//yabook.org 






































第 2 章 搭建 App 整体 框架 ， 完 成 App 静态 页 面 开 发 


Rf 





height: 40px; 
line-height: 40px; 
font-size: 13px; 
Color: #f£973b8; 
text-align: center; 


} 


nav .menu.selected { 
font—size: lApxs 
COLOF:. #£fE> 
font-weight: bolder; 
} 




















此 时 ，Tab 标签 组 就 可 以 正常 显示 了 ， 如 图 2-12 所 示 。 























北京 市 天 天 :办 A 
图 2-11 图 2 一 12 












































这 里 要 注意 nav .menu.selected 这 个 样式 ， 当 某 个 标签 被 激活 时 它 会 被 套用 到 相应 的 标 


实现 选中 的 效果 。 

































































观察 调试 效果 ， 可 以 看 到 页 面 的 header 部 分 和 系统 状态 栏 重合 了 ， 因 为 沉浸 式 效 果 被 默认 






























































启 了， 我 们 需要 更 新 header 的 位 置 ， 防 止 它 被 系统 状态 栏 遮挡 。 在 这 个 页 面 的 apiready 国 












































数 





加 入 以 下 代码 : 


S$api.fixStatusBar( 


) 7 





$api.byId("header" 





A 


这 先 7 















































2.4.2 





接 下 来 制作 Tab 页 面 ， 



































I 





这 里 





























是 加 载 的 商品 种 类 不 同 ， 基 











有 5 个 Tab 页 








2.4 搭建 App 整体 框架 ， 完 成 App 静态 页 理 

















制作 Tab 页 面 并 添加 点 击 事 件 和 动画 效 末 
































43 


过 $Sapi.byId() 方法 获取 了 header 元 素 ， 然 后 通过 $api .fixstatusBar() 为 


它 设置 padding-top， 空 出 了 状态 栏 的 位 置 。 





















































这 个 页 二 














出 征 否 1 审 亚 人 外。 














Var frames = 
for (var i = 
name: 
Wl 


接 下 来 在 html/main.html 文人 























[]; 


G7 主攻 5 4 芭 
frames.push(t{ 


'main_ frame_' + i, 
'./main_frame.html', 


pageParam: { 
wareTypeIndex: i 


} 
})3 



































-IT 




















硬 ， 但 是 这 5 个 页 





此 只 需要 制作 一 个 HTML 模板 。 


的 内 容 都 是 相同 的 格式 ， 只 











创建 html/main_frame.html 模板 。 在 这 个 文件 的 <body/> 元 素 


， 添 加 JavaScript 代码 ; 














var header = $api.byId("header"); 
var nav = $api.byId("nav"); 
Var headerH = S$api.offset (header) .hy 
var navH = $api.offset (nav) .hy 
api.openFrameGroup ({ 
name: 'mainFrameGroup', 
scrollEnabled: true, // 支持 手势 滑动 切换 
rect: { 
Xs Os 
y: headerH + navH, 
w: 'auto', // 自动 填充 所 在 window 的 宽度 
h: 'auto' // 自动 填充 所 在 Window 的 高 度 
}, 
index: 0, // 默认 显示 第 一 个 Frame 
frames: frames, 
preload: frames.length // 预 加 载 所 有 Frame 
}, functionl(ret, err) { 
193 
调试 时 可 以 左右 滑动 Tab 区 域 查看 切换 效 
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输入 in frame， 



































| 


于 测试 





， 此 时 还 不 能 点 击 上 方 的 5 个 标签 实现 切换 。 
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先 观察 api.openErameGroup () ， 这 里 提供 了 name 作为 这 个 Layout 的 名 称 ， 人 允许 手势 

滑动 ，rect 中 设置 了 显示 的 区 域 (y 坐标 空 出 了 header 和 nav 的 高 度 ) ，frames 是 这 个 Layout 里 
面 装 载 的 全 部 fame， 这 里 的 数据 在 之 前 的 循环 中 进行 了 创建 。 

那么 使 用 了 相同 HTML 模板 的 Tab 页 如 何 区 分 要 显示 哪 一 类 的 商品 呢 ? 这 里 可 以 给 
司 一 模板 的 5 个 实例 传递 不 同 的 参数 加 以 区 分 ， 注 意 pageParam 这 部 分 代码 ， 这 就 是 要 传送 给 
Frame (也 就 是 Tab 页 ) 的 数据 对 象 。 

在 html/main_frame .html 中 可 以 获取 这 个 对 象 ， 在 apiready 中 输入 : 





Var param 


























这 里 通过 api.pageParam 获 耳 








中 
十 中 


























$api.jsonToStr (api. 
$api.html ($api.dom("body"), 





param) 

















传 入 的 数据 ， 
， 然 后 将 它 显示 到 body 元 素 中 。 





pageParam) 


;// 将 传 入 的 数据 赋值 给 页 面 的 body 元 素 





























现 滑 动 Tab 页 面 时 

















激活 对 应 标签 的 功 


已 
已 ， 






























































百 会 调 





参数 是 一 个 回调 函数 ， 每 当 Tab 页 切换 完毕 后 
的 参数 。 
羽 此 在 这 个 回调 函数 中 插入 : 


























Var menus 
Fn 


$api. 
} 


$api.addCls (menus [ret.index], 


和 伍 汪 
每 








“selected” 样 


Tab 页 蝇 








下 面 实现 点 击 Tab 柯 

















$api.domAll 


removeCls (menus [ 


il, 





式 全 部 移 除 ， 最 





k 转 和 激活 标签 的 效果 。 




















onclick 事件 ， 





修改 <body/> 标签 


将 对 应 标签 

















<nav id="nav"> 
class="menu selected" tapmode onclick= ee (0); "> 水 果 </div> 


<div 
<div 
<div 
<div 
<div 
</nav> 


class="menu" tapmode 
class="menu" tapmode 
class="menu" tapmode 
class="menu" tapmode 





一 个 Tab 页 被 跳 转 后 ， 都 会 执行 这 段 代 码 。 
后 找到 被 跳 转 到 的 标签 


($api.byId("nav"),".menu"); 
0;i < menus.length; i++){ 
'selected'); 


'selected'); 


通过 $api.jsonToStr() 


这 个 函数 并 以 被 激活 





注意 api.openFrameGroup () 


























sf 








A 























~ 











添加 


写 获 得 所 太 


“selected” 村 





示 签 跳 转 到 对 应 
的 下 标 传 入 ， 然 后 


的 <nav/> 标签 部 分 ， 为 


onclick= 
onclick= 


onclick= 
onclick= 


的 Tab 页 的 
百 使 











各 



































t 注 





"fnSetNavMenuIndex( 
i ee 
"fnSetNavMenuIndex (3 
"fnSetNavMenuIndex (4 




















Tab 标签 ， 然 后 




















将 JSON 对 象 转换 


= 


的 第 二 
[ 面 的 信息 作为 传 入 


巴 它 们 的 











F 式 即 可 。 这 样 














现 





对 想 要 实 点 吝 





功能 ， 通 过 


对 应 的 API 跳 转 即 可 。 


册 onclick 事件 : 


” 


); 











;"> 食 材 </div> 


"> 零食 </div> 
> 牛奶 </div> 
"> 蔬菜 </div> 





击 的 标 





就 实现 了 


E 册 


tapmode 所 





建 FrameGroup 时 设置 的 名 称 ，index 参数 是 被 激 读 






































2.4 搭建 App 整体 框架 ， 完 成 App 静态 














在 <script/> 标签 中 添加 函数 : 








function fnSetNavMenuIndex (index_) { 
Var menus = $api.domAll ($api.byId("nav"), ".menu"); 
$api.addCls (menus[index_], 'selected'); 
api.setFrameGroupIndex({ 
name: ‘'mainFrameGroup', 
index: index_, 
scroll: true 
}); 


























html 代码 中 的 tapmode 移 除 了 html 页 面 











TT 

















的 点 击 延 迟 ， 使 体验 更 接近 原生 





ex 



































性 并 点 击 标签 以 体验 区 别 。 








mT 
Bu 





























JavaScript 代码 中 使 用 了 api .setFrameGroupIndex() 来 激活 Tab 页 面 








，name 参数 是 之 前 





























J 





TT 






























































是 否 有 平滑 滚动 效果 。 









































F 面 来 实现 具体 Tab 页 的 内 容 。 








页 面 的 下 标 ，scroll 参数 表示 frame 切换 


























清空 “html/main_frame.html” <body/> 标签 和 apiready 国 数 中 的 内 容 ， 然 后 在 <body/> 











错 














插入 : 





<header id="header"> 
<img id="banner" class="banner" src="../image/default_rect.png"> 
</header> 
<section id="list"> 
<div class="ware"> 
<div class="content"> 
<img class="thumbnail" src="../image/default_square.png"> 
<div class="info"> 
<div class="name">name</div> 
<div class="description">description</div> 
<div class="price-tag"> 
<span class="price">¥100</span> 
<span class="unit">/kg</span> 





</div> 
<div class="origin-price"> 超 市 : 
<del>¥110</del> 
</div> 
</div> 
<div class="control"> 
<img class="add" src="../image/add.png"> 
</div> 
</div> 
</div> 
</section> 





<div class="push-status" id="pushstatus"> 上 拉 显 示 更 多 </div> 














重 入 : 





Ce 


在 <style/> 标签 
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header { 
width: 100%; 
height: 130px; 
box-sizing: border-box; 
padding: 4px 1l10px; 


header .banner { 
width: 100%; 
height: 100%; 


section { 
position: relative; 
width: 工人 DO 本 
height: auto; 
box-sizing: border—box: 
padding: 0 8px; 


.content { 
width: 100%; 
height: 100%; 


.ware { 
position: relative; 
width: 100%; 
height: 145px; 
box-sizing: border-box; 
padding-top: 15px; 
padding-bottom: 1l5px; 
border-bottom: lpx solid #dldldl; 


.ware .thumbnail { 
position: absolute; 
top: 20px; 
left: Opx; 
height: 100px; 
width: 1l100px; 


.Ware .info { 
width: 100%; 
height: 114px; 
box-sizing: border-box; 
padding-left: 112px; 
padding-right: 28px; 


.ware .info .name { 
width: 100%; 
height: 1l5px; 
olors. #35555553 
margin-top: 1l4px; 
font-Size: 15px} 


.Ware .info .description { 


margin-—top; 10px; 


width: 
height: 


100%» 
13px; 


font-Bize: 13pxs 


Color: 


#9d9d9d; 


.ware .info .price-tag { 
margin-top: lO0px; 


width: 
height: 


人 
126%: 


font-Size: 12pDx? 
vertical-align: top; 


.Ware .info .price-tag .price { 


GolLor: 


#e3007f£; 


.Ware .info .price-tag .unit { 
font-size: 8px; 


oOoLlor: 


#cbcbcb; 


.Ware .info .origin-price { 


margin— 


width: 
height: 
font=8t 
CoOLOrs 


.Ware .co 
Positic 
width: 
height: 
right: 
top: 90 


.Ware .co 
positio 
tops Vs 
E40hts 
width: 
height: 
z-index 


Push=sta 
width: 
height: 
在 Cn 一 忆 主 
GOLOES 
line-he 
text-al 


top: 5DX7 
100% 
10px} 
Ze: lO0px; 
#d3d3d3; 


EL Tf 
n: absolute; 
110px; 
23pR3 
8px; 
Px; 


ntrol .add { 
n: absolute; 


0; 
23px 
人 23 
2 


tus { 
i100 

40px; 
Ze: 16px; 
#888; 
ight: 40px; 
ign: center; 


background-color: #fff; 


.active { 





2.4 搭建 App 整体 
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医 





架 





， 完 成 App 静态 页 再 





























发 
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4 








vpacity: Qo73 












































的 Web 技术 即 可 实现 ， 不 再 费 述 。 此 时 页 面 
信 为 其 加 入 真实 数据 。 显 示 效 果 如 


























里 使 党 
学 习 如 何 通过 网 络 通 





























区 



















































































是 静态 的 ， 没 有 加 载 实际 数 
2-13 所 示 。 





ml 


























2 一 13 


2.4.3 制作 悬浮 购物 车 信息 栏 



































下 面 实现 悬 译 的 购物 














车 信息 Frame， 建 立 html/minicart_frame.html 文 丛 





EF， 清空 <style/> 标 






































签 、<body/> 标签 和 apiready 函数 的 内 容 。 在 <body/> 标签 


Ee 


<section> 
<span class="prefix">¥</span> 


<span id="amount" class="amount">0</span> 


重 入 以 下 代码 : 





a 





2.4 搭建 App 整体 


<span id="count" class="count"></span> 
</section> 

















在 <style/> 标签 中 插入 以 下 代码 : 








html,body { 
height: 100%; 
background-color: transparent; 


section { 
display: inline-block; 
box-sizing: border-box; 
padding: 4px; 
Width:. autos 
height: 33px; 
min-width: 35px; 
line-height: 25px; 
colLors #5EF€y 
font=aize: 1l12px} 
background-image: url(../image/minicart.png); 
background-repeat: no-repeat; 
background-size: auto 33px; 
background-position: right center; 


Count 1 
display: none; 
box-sizing: border-—boxs; 
padding-left: 4px; 
padding-right: 4px; 
width: auto; 
min-width: 25px; 
height: 25px; 
border-radius: 13px; 
background-color: #fff; 
text-align: center; 
color: #e3007f; 














在 <pody/> 标签 中 插入 以 下 代码 : 








<section> 
<span class="prefix">¥</span> 
<span id="amount" class="amount">0</span> 
<span id="count" class="count"></span> 
</section> 


























打 “html/main.html”， 在 apireaqy 国 数 中 插入 : 














api.openFrame ({ 
name: ‘'minicart_frame', 
Urls /minioart frame. html', 
rect: { 
和 #0 
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架 





， 完 成 App 静态 页 再 
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书 二 



































Yh 


y: api.winHeight — 55, 


ws 150, 
h: 34 
}, 
bounces: false // 关闭 弹 动 


1); 
api.bringFrameToFront ({ 


from: ‘minicart_frame' 


]) 7 
































， 显 示 在 指定 位 置 ， 且 显示 的 位 















































这 里 首先 通过 api.openFrame () 将 购物 车 信息 Frame 打 


和 大 小 通过 rect 参数 指定 。 之 后 通过 api.bringFrameToFEront () 将 这 个 Frame 移动 到 最 前 


因为 这 个 Frame 是 以 固定 位 置 的 方式 定位 在 Window 
当 Tab 页 上 下 滚动 时 也 不 会 随 着 移动 。 效 果 如 图 2-14 所 示 。 


























































































































的 ， 它 会 悬浮 在 Window 的 最 上 层 ， 





























3 
测 。 


于 
























































name 


Y100 
© 











2—14 





2.4 搭建 App 整体 





匡 架 ， 





完成 App 静态 页 再 


















































他 静态 页 男 











本 App 涉及 的 其 




















I 
4 


























接 粘 贴 到 








己 完成 ， 包 括 

















页 的 城市 选择 页 














I 














， 也 可 以 在 


























html 











下 To。 











找到 





























本 节 起 始 处 的 资源 列表 


2.4.4 跳 转 到 登录 页 面 

















下 面 将 介绍 如 何 跳 转 到 








写 尿 内因 。 


























pa] 


已 完成 的 静态 页 面 


























找到 
































录 下 。 在 html/login.html 页 面 








的 html 


























header = $api.dom("#header"); 
ixStatusBar (header); 
$api .offset (header) 


MAE 
$api. 
headerH = 





var shy 


api.openFrame ({ 
'loginFrame', 
'./login_ frame.html', 





name: 
放下 1 
Teets 二 
类 7 
y: headerH, 
Wi auto"s 
hs: "aute" 
}, 
bgColor: 
上 于 


'rgba(0,0,0,0)', 

















的 apireagy 国 数 





插入 以 下 代码 : 
































， 为 个 人 











到 标 

















旋 











IT 

















在 html/main.html 页 











) 注 册 点 ID 亏 








es 

















<div class="right" tapmode onclick="fnOpenPersonalCenterWin()"></div> 





插入 以 下 代码 

















在 <script/> 标签 





function fnOpenPersonalCenterWin(){ 
api.openWin({ 

'personalcenter', 

rlogin. htmL" 


name: 
Els 


















































， 代 码 如 下 : 


资源 中 的 html/login.html 和 html/login_frame.html， 将 它们 复制 到 项 





















































心 页 盏 





暂 时 了 示 为 登 簿 贝 自 。 


I 

























































































这 里 通过 api.openWin() 打开 个 人 中 心 页 面 ， 个 人 
html/login.html 页 面 中 ， 为 返回 按钮 (左上 和 角 ) 注册 点 击 事 














<div class="back" tapmode onc 















































事件 中 调 











接 本 


Et 
lt 





这 











人 





ick="api.closeWin()"></qd 


api.closeWin() 关闭 


a 





前 





件 ， 代 码 如 下 : 


iv> 











Window。 效 果 如 医 
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写 10:20 





全 使 用 微 信 登 
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2.4.5 城市 选择 菜单 和 事件 通信 


下 面 完 成 城市 选择 菜单 ， 建 立 html/cityselector_frame.html 文 伯 
下 代码 : 




















， 在 <body/> 标签 中 插入 以 








I 





























Pw 

















<header> 
<div class="title"> 选 择 所 需 服务 的 地 区 </div> 
</header> 
<section id="list"> 
<div class="city"> 北 京 </div> 
<div class="city"> 天 津 </div> 
<div class="city"> 西 安 </div> 
</section> 



































在 <style/> 标签 中 插入 以 下 代码 : 

















2.4 搭建 App 整体 框架 ， 完 成 App 静态 页 盏 





html,body { 

height: 100%; 

background-color: rgba(0,0,0,0.7); 
} 


header { 
width: 100%; 
height: 96px; 


header .title { 
box-sizing: border-box; 
width: auto; 
height: 96px; 
margin: 0 32px; 
padding-top: 64px; 
padding-bottom: 16px; 
border-bottom: 2px solid #c8026f; 
Color: #fff; 
font-size: 14px; 
text-align: center; 


section { 
width: 100%; 
height: auto; 


:eit 
width: 100%; 
height: 55px; 
line-height: 55px; 
text-align: center; 
font-size: 22px; 
COLor: #ff£; 


.highlight { 
opacity: 0.7} 




















修改 html/main.html， 为 城市 选择 按钮 的 div 添加 点 时 








件 ， 代 码 如 下 : 











<div class="left" tapmode onclick="fnOpenCitySelectorFrame()"> 
<div class="arrow" id="arrow"></div> 
<div class="city"” id="city"> 北 京 市 </div> 

</div> 




















在 <script/> 标签 中 添加 代码 : 





function fnOpenCitySelectorFrame (){ 
Var header = $api.byId("header"); 
Var headerH = $api.offset (header) .hy; 
api.openFrame ({ 
name: 'citySelectorFrame', 
url: './cityselector_ frame.html', 
rect: { 
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0， 
headerH, 
"auto"y 
"auto'" 


Ti~ x 


}, 
BoCcolors zobat0rgrd 0 
}); 
$api.addCls ($api.byId("arrow"),"active"); 





这 里 通过 api .openFrame () 的 bgColor 参数 设置 了 Frame 背景 色 和 透明 度 。 








































































































下 面 实现 城市 选择 和 关闭 城市 选择 的 Frame， 打 开 html/cityselector_frame.html， 为 城市 div 
添加 点 击 事件 ， 代 码 如 下 : 


























<div class="city" tapmode onclick="selectCity(0)"> 北 京 </div> 
<div class="city" tapmode onclick="selectCity (1)"> 天 津 </div> 
<div class="city" tapmode onclick="selectCity (2)"> 西 安 </div> 


























在 <script/> 标签 中 插入 : 














function selectCity (index_){ 
var cities = $api.domAll(".city"); 
var cityName = $api.html (cities[index_ ]); 
api.sendEvent ({ 
name: 'citySelected', 
extra: { 
cityName:cityName 









































这 里 在 点 击 某 个 城市 div 时 ， 获 取 当 前 div 内 的 城市 名 称 ， 并 向 3 
citySelected， 附 加 信息 是 所 选择 的 城市 的 名 称 。 






































擎 发 送 事件 。 事 件 名 是 



























































打开 html/main html， 在 apiready 函数 中 添加 以 下 代码 : 








api.addEventListener({ 
name: "citySelected' 
}, function(ret, err){ 
$api.removeCls ($api.byId("arrow"), 'active'); 
$api.html ($api.byId("city"), ret.value.cityName); 
api.closeFrame({ 
name: 'citySelectorFrame' 
}); 
}); 
"active' 
和 
Sapl htmlt{ 
Sapi, byIid{"eity")s 
ret.value.cityName 
) 
}); 


2.5 水 纺 55 























这 里 监听 了 事件 citySelected， 在 监听 到 之 后 触发 后 面 的 回调 函数 ， 关 闭 城 市 选择 Frame， 
之 后 修改 箭头 的 指向 并 且 更 新 城市 名 称 。 效 果 如 图 2-16 所 示 。 




























































































选择 所 需 服 务 的 地 区 


北京 


天 津 


西安 





图 2-16 


2.5 小 结 


本 章 搭建 了 示例 App 的 整体 UI 架构， 实现 了 界面 之 间 的 跳 转 ， 通 过 首页 的 静态 页 的 编写 ， 
学 习 了 一 些 实用 的 静态 页 面 开 发 技术 。 
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第 3 章 


联 调 前 后 端 数 据 接口 ， 实 现 App 数据 从 服务 
站 动态 获取 








关于 接口 的 详细 信息 请 参阅 接口 文档 ”。 


主要 内 容 

在 第 2 章 编写 出 示例 项 目的 静态 页 面 后 ， 本 章 会 带领 读者 获取 后 端 API 数据 并 将 其 更 新 到 
示例 项 目 中 。 
学 习 目 标 

(1) 学 习 APICloud 的 常用 通信 技术 和 API 接口 。 

(2) 使 用 api.ajax() 进行 与 后 端 通信 。 

(3) 依据 接口 文档 获取 数据 并 更 新 到 App 中 。 














GD 开源 仓库 中 第 一 部 分 \ 示 例 项 目 资源 \ 接 口 文 档 \server-api-v1.1.pdf。 
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3.1 APICloud 提供 的 数据 通信 能 力 和 相关 API 


APICloud 提供 了 对 数据 通信 能 力 的 封装 ， 数 据 通信 主要 通过 相应 API 的 调用 来 实现 。 一 些 
第 见 的 API 如 api.ajax() 可 以 让 开发 者 快捷 地 进行 HTTP 请 求 且 不 用 考虑 跨 域 问题 。 



















































































mi 
凋 






















































































3.1.1 APICloud 支 持 的 通信 协议 
APICloud 支持 以 下 协议 来 进行 数据 通信 : 









































e HITIP ; 
e HIIPS ; 
e TCP/UDP, 























hy 


























APICloud 从 引擎 级 别 支 持原 生 的 标准 HITP 协议 ， 支 持 跨 域 异步 请 求 。 同 时 ， 支 持 标 ? 
HTTPS 协议 、 双 向 HTTPS 证 书 、 本 地 HTTPS 证 书 加 密 和 标准 TCP/UDP 协议 ， 并 且 封 装 
标准 的 Socket 接口 。 













































































A 




















3.1.2 用 于 HTTP 通 信和 的 主要 API 
















































































APICloud 于 HTTP 通信 相关 的 常用 API 包括 : 
api.ajax() // 发 送 请 求 
api.cancelAjax() // 取消 请 求 
api.download() // 开 始 下 载 
api.cancelDownload() // 取 消 下 载 




































































这 里 以 api.ajax( 为 例 ， 其 提供 了 对 ajax 技术 的 实现 ， 相 对 于 使 用 JavaScript 实现 的 ajax， 如 
XMLHttpRequest 和 JQuery 等 框架 的 ajax，apiajax 做 了 很 多 性 能 改进 和 优化 适 配 ， 例 如 支持 跨 
域 、 文 件 上 传 下载 、 自 定义 请 求 头 信 息 等 。 常 见 的 使 用 方式 如 下 : 













































































api.ajax({ 

url: 'http://hostname/path',// 请 求 的 服务 器 地 址 及 API 路 径 
method: 'post',// 请求 类 型 

data: {//POST 类 型 请 求 时 所 要 传送 的 数据 

// 以 表单 键 值 对 的 方式 提交 数据 ， 如 {"field1": "valuel",， "fieldl": "value2"} 


Values: { 











name: 'pomelo' 
]v 
// 以 表单 方式 提交 文件 
files: 
le "Fes//a yit' 





} 
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}, function(ret, err) { 
//TODO 处 理 请 求 结果 回调 
































//ret = { 
// progress: 100, // 上传 进 度 ,0.00-100.00 
// status: "0 // 上 传 状态 ， 数 字 类 型 。(0 : 上 传 中 、1 : 上 传 完成 .2 : 上 传 失败 ) 
// body: '' // 上传 完成 时 ， 服 务 器 返回 的 数据 

//} 


























关于 api .ajax() 的 更 多 信息 请 参阅 官方 文档 。 











3.2 APICloud 数据 云 









































APICloud 数据 云 简化 了 后 端的 生成 和 部 署 ， 使 用 APICloud 数据 
面 操作 的 方式 ， 快 速 地 建立 数据 库 、 表 、 业 务 模型 和 相关 的 API， 这 极 大 地 简化 了 后 端的 开发 。 









































3.2.1 APICloud 数 据 云 的 用 途 








| 
YY 





























发 者 可 以 采 
















































































个 应 用 ， 开 发 者 有 自己 的 
































在 一 个 APICloud 应 ， 默 认 数据 云 服 务 是 关闭 的 。 如 发 
导 










































































服务 器 ， 并 且 有 服务 器 端 团 队 开 发 服务 端 接口 ， 



































人 么 APICloud 数据 云 就 完全 不 需要 开启 ， 因 为 


FEF 台 没 任何 关系 ; 只 不 过 






























































应 用 的 数据 都 是 放 在 开发 己 的 服务 器 和 数据 库 中 ， 与 APICloud 9 
















































































任何 关系 了 。 








APICloud 开发 了 一 个 App， 这 个 App 从 编译 完 生 成 ipa 和 apk 包 之 后 ， 跟 APICloud 就 没有 






















































































但 是 ， 如 发 者 没 己 的 服务 器 ， 也 没有 自己 的 服务 端 



































| 





队 为 App 实现 接口 ， 那 
































上 共 图 化 组 日 的 方式 帮助 




















么 就 可 以 选择 使 用 APICloud 数据 云 服 务 。APICloud 数据 云 可 以 提 
户 








创建 数据 模型 ， 并 自动 生成 RESTful 风格 的 API， 还 可 以 保存 文件 。 



























































































































































A 


对 于 不 同 的 API 可 以 

































































































































































































































































不 同 的 访问 权限 (如 角色 和 用 户 )。 在 控制 台中 还 可 以 通过 API 调试 页 面 快速 验证 接口 和 返 区 
的 数据 。 如 发 者 选择 APICloud 数据 云 作为 后 端 ， 在 开发 工具 中 可 以 直接 使 用 封装 好 的 数据 
云 相 关 模 块 和 前 端 框架 来 快速 操作 数据 ， 这 比 直接 调用 ajax 的 方式 要 简单 得 多 。 























3.2.2 APICloud 数 据 云 的 特点 









































APICloud 可 以 为 用 户 提供 数据 云 服务 ， 数 据 云 具有 以 下 特点 (如 























PE 



































。 无 需 搭 建 服务 器 、 设 计 表 结构 ， 并 且 无 需 编写 任何 后 端 代码 。 

















到 3-1 所 示 )。 






























































。 默认 内 置 user、fle、role 等 基础 数据 模型 ， 可 以 根据 应 用 需求 ， 扩 展 字段 或 自 定义 其 他 





数据 模型 

































































。 在 线 可 视 化 定义 数据 模型 ， 根 据 数据 模型 自动 生成 RESTful API。 
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。 在 移动 端 通过 云 API， 操 作 云端 数据 模型 ， 业 务 逻 辑 在 App 端 实 现 。 


虽然 APICloud 是 一 个 云端 一 体 的 平台 , 但 是 APICloud 的 端 API 和 云 API 是 可 以 分 开 使 用 的 。 
开发 者 可 以 只 使 用 端 API 开 发 App， 服 务 器 端 自己 来 开发 。 也 可 以 只 用 云 API 开 发 服务 端 ， 而 
App 采 用 原生 开发 ;或 者 云 和 端 都 使 用 APICloud 开 发 。 所 以 ,APICloud 数 据 云 是 一 个 可 选 的 服务 ， 
开发 者 可 以 根据 自己 团队 情况 来 选择 使 用 。 


@ -HG 


云 钢 设计 数据 库 


提供 可 视 化 的 云 负 NoSQL 数 据 表 设计 ， 支 持 多 达 10 神 数据 类 型 ， 简 单 配 
痢 即 可 完美 垃 现 App 去 与 沉 的 数据 连通 















ons =《 
a 
Cloud. on/mce/ Ca a 
method: “GET™, 
headers: 
' “XxX-APlCloud-Plattore": 


自动 生成 RESTful API 

无 需 开发 者 手动 柱 码 封装 ，APICloud 即 可 根 钦 数据 表 设 计 自 动 生成 
” ，_:X-APICloud-Ap- RESTful AP| ,最 大 程度 减少 服务 器 入 开发 工作 和 
pld* j 7A6954389585948 

预 昨 常 用 云端 功能 模块 


内 置 用 户 系统 、 角 色 系 统 、 文 件 系 统 、 权 限 控 制 等 ， 开 发 者 几 行 代码 即 
可 实现 快速 集成 











图 3-1 


3.3 ” 联 调 前 后 端 数 据 接口 ， 实 现 App 数据 从 服务 端 动态 获取 


本 节 将 带领 读者 学 习 在 示例 App 中 添加 与 服务 器 数据 通信 的 能 力 。 









































3.3.1 实现 用 户 注册 功能 


读者 可 能 还 没有 实现 用 户 注 册 的 静态 页 面 ， 在 第 2 章 中 已 经 学 习 了 制作 静态 页 面 和 实现 页 
面 跳 转 的 方法 ， 读 者 可 以 自己 实现 这 个 静态 页 面 或 直接 使 用 示例 项 ,经 完成 的 静态 页 面 "。 
在 完成 这 个 静态 页 面 后 ， 项 立 该 有 html/register.html 文件 和 html/register_frame.html 文件 

闫 现 用 户 注册 功能 。 






























































































































































































































































II 






































o 



































Rl 
-IT 





























打 “html/ register_frame.html” ， 为 注册 按钮 添加 点 二 











iT 





事 人 











<div class="btn" tapmode onclick="fnRegister()"> 注 册 </div> 














在 <script/> 标签 中 添加 函数 : 
































GD 开源 仓库 中 第 一 部 分 \ 示 例 项 目 资源 \ 静 态 网 页 。 
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function fnRegister(){ 


Var username = S$api.byId 


Var password = $api.byId 
Var Vusername = $api.val 
Var vpassword = $api.val 


api.ajax({ 
url: 'https://d.apicloud.com/mcm/api/user', 


method: 'Post' 
headers: { 


"X-APICloud-AppId": 
"X-APICloud-AppKey":"2672b5911d8551540clea598e01lc87fee217ale5 


站 
data: { 
values:{ 

















"username"); 


"password"); 
username); 
password); 


"A6921544633372", 


username:vusername, 
password:vpassword 


} 
Ds 


function (ret, err){ 


if (ret && ret.id)t{ 
alert ("注册 成 功 ! ")， 


} else { 


alert ("注册 失败 ! ")， 























户 输入 的 








这 里 获取 到 
过 api.ajax() 发 送 请 求 ，url 参数 为 要 请 求 的 地 
明 本 次 请 求 为 POST 请 求 ， 即 提 








te 








过 





址 ，methodq 参数 声 


调 函 数 } 














data:{value:{}} 是 提交 的 数据 ， 最 后 通 








户 名 和 密码 内 容 

















a 
， J] 旺 





i 























判断 请 求 是 否 成 功 ， 如 图 3-2 所 示 。 











3.3.2 实现 用 户 登 录 功 能 




















利 
它们 分 另 








第 1 章 学 到 的 知识 ， 














打 


<div class="btn" tapmode onclick="fnLogin()"> 登 录 </div> 





function fnLogin(){ 


在 <script/> 标签 





html/login_frame.html， 为 



































制作 静态 的 





录 页 面 ， 

















是 html/login.html 和 html/login_frame.html, 











， 实 现 App 数据 从 服务 端 动态 获取 








录 按 钮 > 














添加 冰 数 : 


Var username = $api.byId("username"); 


Var password = $api.byId 
Var vusername = S$api.val 





"password"); 
username); 


( 
( 
( 
( 


Var vpassword = S$api.val (password); 


api.ajax({ 














二 





件 : 


.1482500122476" 
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url: 'http://d.apicloud.com/mcm/api/user/login', 
method: 'post', 
headers:{ 
"XxX-APICloud-AppId": "A6921544633372", 
"XxX-APICloud-AppKey": "2672b5911d8551540clea598e0lc87fee21l7ale5.1482500122476" 
}, 
dat 
values: { 
username:vusername, 
password:vpassword 


} 
}, 
function (ret, err){ 
if (ret && ret.userId) { 
alert (" 登录 成 功 ! ")，; 
} 
else { 
alert (" 登录 失败 ! ") ; 


}); 








效果 如 图 3-3 所 示 。 
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3.3.3 获取 商品 列表 数据 


打开 html/main_frame.html， 在 apiready 国 数 中 添加 以 下 代码 : 
































Var params = { 
fields: {}, 
where: { 
supportAreald: "56c80e0c789b068408ab5a6f", 


wareTypeId: api.pageParam.wareTypeId 


}; 
api.ajax({ 
url: 'http://d.apicloud.com/mcm/api/ware?filter=' + $api.jsonToSstr (params), 
method: "get", 
headers:{ 
"Xx-APICloud-ApplId": "A6921544633372", 
"X-APICloud-AppKey": 
}}, 
function(ret, err)f{ 
if (ret) { 


"2672b5911d8551540clea598e01c87fee217ale5.1482500122476" 


console.log($api.jsonTostr (ret)); 


} 
); 























在 加 载 5 个 Tab 页 面 时 会 调 














api.ajax() 发 送 请 求 ，params 作为 url 参数 的 一 部 分 被 
发 送 ，supportAreaId 和 wareTypeId 分 别 是 当前 地 区 和 分 类 类 别 。 这 里 ， 当 前 地 区 默认 为 
北京 ("56c80e0c789b068408ab5a6f" 是 项 目 内 初始 化 的 北京 地 

FrameGroup 时 传 入 的 类 别 参 数 。 














区 






























































区 的 标识 ) ，wareTypeId 为 打 



























































二 | 














console.1o0g() 中 传 入 的 字符 串 会 输出 在 调试 工具 中 ， 这 样 调试 就 非常 方便 








o 






































打 “html/main.html”， 修 改 脚本 中 创建 FrameGroup 的 部 分 : 
var frames = []; 
for (var 1 = 0 1 < 5 14+4+} + 


frames.push({ 
name: 'main frame_' + i, 
url: './main_frame.html', 
pageParam: { 
wareTypeIndex: i 
} 
} 
J 
} 
Erames [0] .pageParam.wareTypeld = "56c80da883af652643474b6b"; 
frames [1] .pageParam.wareTypeld = "56c80db78d04c83d3dldedea"; 
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frames [2] .pageParam.wareTypeId = "56c80dc031lda9e480delcb49"; 
frames [3] .pageParam.wareTypeld = "56c80dc383af652643474b6d"; 
Erames [4] .pageParam.wareTypeld = "56c80dc88d04c83d3dldedf3"; 





























这 里 分 别 为 每 个 frame 传送 了 真实 的 分 类 标识 (项目 内 部 使 用 )。 










































































现在 运行 项 目 ， 会 弹出 5 个 窗口 ， 并 在 命令 行人 分 别 显 示 5 个 Tab 页 所 加 载 的 JSON 数 扫 























mm 





























3.3.4 显示 商品 列表 


接 下 来 根据 数据 内 容 ， 为 Tab 页 面 生 成 商品 列表 ， 修 改 html/main_frame.html 中 获取 商品 
列表 的 回调 函数 : 
































TT 




















ke 











rt} 污 
Var list = $api.byId("list"); 
list.innerHTML = ""7 


for (var 二 nn Et}4: 

Var ware = retl[il]; 

$api.append!( 
iatp 
5 
<div class="ware">\ 
<div class="content">\ 
<img class="thumbnail" src="' + ware.thumbnail.url + '">\ 
<div class="info">\ 
<div class="name">' + ware.name + '</div>\ 
<div class="description">' + ware.description + '</div>\ 
<div class="price-tag">\ 
<span class="price">Y¥' + ware.price + '</span>\ 
<span class="unit">/kg</span>\ 
</div>\ 
<div class="origin-price"> 超 市 :\ 





<del>Y¥' + ware.originPrice + '</del>\ 
</div>\ 
</div>\ 
<div class="control">\ 
<img class="add" src="../image/add.png">\ 
</div>\ 
</div>\ 
</div>\ 
D); 


} 
else { 
alert ( JSON.stringify( err ) ); 


















































将 获得 的 商品 列表 循环 插入 到 页 面 中 ， 并 且 每 个 Tab 显示 了 不 同 的 内 容 ， 如 图 3-4 所 示 。 














区 
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居 从 服务 端 动态 获取 





居 接 口 ， 实 现 App 数 扫 
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图 3 一 4 
3.4 小 结 
本 章 学 习 了 如 何 使 用 api.ajax() 函数 调用 后 端 接 口 ， 实 现 用户 登 录 、 注 册 和 商品 列表 加 载 
的 功能 。 本 章 为 了 讲解 方便 ， 城 市 ID 和 商品 分 类 ID 都 使 用 了 项 目 内 的 默认 值 ， 在 实际 的 项 目 当 
的 城市 信息 列表 和 商品 分 类 数据 都 是 需要 通过 调用 接口 获得 的 ， 请 读者 尝试 自己 完成 。 
向 GitHub 仓库 ?里 找到 这 部 分 的 完整 实现 代码 。 






































外 在 本 书 第 一 部 分 项 目 源 码 所 在 上 





























\widget。 




















资源 \ 完 整 项 














部 分 \ 示 例 项 














@ 开源 仓库 中 











第 4 章 


加 载 更 新 服务 端 数 据 ， 实 现 本 地 的 数据 存储 





主要 内 容 
在 第 3 章 中 已 经 介绍 了 APICloud 和 后 端 交互 的 机 制 ， 并 将 商品 列表 根据 数据 进行 了 显示 。 


本 章 将 学 习 doT 模板 引擎 的 基本 使 用 ， 本 地 存储 和 图 片 缓 存 的 使 用 ， 以 及 下 拉 刷 新 、 上 拉 加 载 
的 实现 。 让 读者 理解 APICloud 应 用 沙 箱 结构 ， 掌 握 APICloud 资源 访问 协议 使 用 、 常 用 对 话 框 
窗口 的 使 用 、 窗 口 间 的 通信 机 制 和 APICloud 平台 的 事件 机 制 。 


学 习 目 标 
(1) 学 习 doT 模板 引擎 的 使 用 。 
(2) 学 习 本 地 存储 和 图 片 缓存 。 
(3) 下 拉 刷 新 、 上 拉 加 载 的 实现 。 
(4) 理解 APICloud 应 用 沙 箱 结构 。 
(5) 掌握 APICloud 资源 访问 协议 使 用 。 
(6) 学 习 常 用 对 话 窗口 的 使 用 。 
(7) 学 习 窗 口 间 的 通信 机 制 。 
(8) 学 习 APICloud 平台 的 事件 机 制 。 
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4.1 使 用 doT 模板 引擎 


第 3 章 中 ， 在 获取 商品 列表 后 ， 使 用 JavaScript 脚本 拼接 的 方式 生成 了 商品 列表 的 多 个 
HTML 元 素 (字符 串 ) ， 并 将 它们 插入 到 相应 位 置 。 在 实现 过 程 中 可 以 看 到 大 量 字符 串 拼 接 操 
作 和 逻辑 控制 ， 这 样 做 是 烦琐 的 ， 因 为 JavaScript 不 是 标记 语言 ， 不 适合 生成 HTML 代码 。 使 
doT 模板 引擎 可 以 扩展 HTML 的 语法 ， 方 便 实 现 数据 和 页 面 分 离 ， 简 化 动态 生成 HTML 
的 过 程 。 
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例如 想 要 在 一 个 <div/> 标签 中 显示 变量 user .name， 那 么 一 般 需 要 构建 这 样 的 JavaScript 









































芭 本 : var html = '<div>' + user.name + '</div>';， 而 使 用 doT 模板 引擎 之 后 可 以 但 


~ 








nr 


























这 样 的 语法 : <div>{{=user.name}}</div>。 



































下 面 提供 一 个 具体 的 doT 示例 : 











IDOCTYEE html> 
<html> 
<head> 
<script type="text/javascript" src="http://olado.github.io/doT/doT.min.js"></script> 
</head> 
<body> 
</body> 
<script type="text/template" id="template"> 
{{~ it:user:index }} 
{{? user.deleted !== true}} 
<div>{{= index + 1}}</div> 
<div> {{= user.name }}</div> 
<hr> 
CC 
{{=}} 
</seript> 
<script type="text/javascript"> 
Var users = [ 
{name:" 姓 名 1"}， 
{name:" 姓 名 2", deleted:true}, 
{name:" 姓 名 3"} 
] 
var strTemplate = document.getElementById ("template") .innerHTML;// 获取 doTf 模 板 
var fnTemplate = doT.template (strTemplate);// 编译 为 模板 函数 
strTemplate = fnTemplate (users);// 通 过 模板 函数 生成 HTML 字符 串 
document .bodqy .innerHTML = strTemplate; 
/Seript> 
</html> 








区 



































可 

















是 一 个 完整 的 HTML 页 面 。 首 先 在 <headq></head> 中 引入 doT 模板 引擎 的 JavaScript 
文件 。 第 一 个 <script></script> 标签 内 的 内 容 就 是 doT 模板 的 内 容 ， 第 二 个 <script></ 


script> 标签 中 做 了 下 面 的 事 : 
























































( 


(5) 将 HTML 字符 串 
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测试 用 数据 (users ) ; 











2) 获取 模板 内 容 (strTemplate) ; 

















3) 根据 模板 内 容 编 译 为 模板 函数 (fhTemplate); 


4) 使 用 编译 好 的 模板 函数 生成 HTML 字符 串 ， 这 
结构 又 给 了 


















































且 传 入 了 参数 users 作为 数据 ， 返 回 的 

















LH 























strTemplate ; 




















重 入 <body></body> 中 。 姓名 1 








U 

















user.name }} 会 输出 变量 内 容 。 运 行 结果 如 图 4-1 所 示 。 


关 了 


4.2 
数 


在 模板 中 ， 传 入 的 数据 默认 用 站 表示 。 使 用 了 数组 遍历 姓名 3 


{{~ it:user:index }} {{~}}， 这 之 间 的 标记 会 被 重复 输 





出 。{{? user.deleted !== true}} {{?}} 是 条 件 判 断 。{{= 








































































































doT 的 更 多 语法 可 以 在 它 的 官方 网 站 找到 。 





























图 4 一 1 


本 地 存储 和 图 片 缓存 












































居 的 本 地 存储 和 图 片 缓 存 可 以 极 大 地 提高 App 的 用 户 体验 、 提 高 UI 响应 速度 、 减 少 网 



































络 使 





。 本 市 将 介绍 数据 的 本 地 存储 和 图 片 缓存 。 


4.2.1 uzStorage 


APICloud 提供 了 uzStorage 来 提供 类 似 localStorage 的 功能 ， 但 是 比 localStorage 更 适合 混合 











App 





二 。 uzStorage 比 标准 的 localStorage 更 安全 也 用 ， 例 如 localStorage 有 大 小 限制 、 























































































































[= 

异 
会 导致 一 些 安全 问题 、 不 能 存储 对 象 等 问题 ， 得 这 些 间 题 均 在 uzStorage 中 得 到 了 解决 。 通 过 下 
面 的 API 控 


$api. 
$api. 
$api. 
$api. 





















































制 uzStorage : 


getStorage ("key"); 获取 数据 
setStorage ("key", "value"); 存储 数据 
rmStorage ("key") ; 移 除 保存 的 数据 
clearStorage () ; 清空 本 地 存储 


4.2.2 偏好 设置 
APICloud 提供 了 针对 系统 原生 偏好 设置 操作 的 API (如 Android 的 preference 和 iOS 的 


plist) ， 





使 
[入 








































































































于 








键 值 对 的 方式 存储 。 通 过 下 面 的 API 控制 偏好 设置 : 








nl 
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api.getPrefs ("key");// 获取 偏 好 设置 
api.setPrefs ("key", "value");// 设 置 偏好 设置 
api .removePrefs ("key");// 删除 偏 设置 


4.2.3 文件 





文件 : 
































APICloud 提供 了 标准 的 文件 操作 接口 ， 支 持 同步 和 异步 的 调用 方式 。 使 用 下 





























的 API 操作 











I 




















api.readFilel({ 
sync:false,// 是否 同步 ， 默认 false 
path:"PathToFile"// 文 件 路 径 ， 支 持 绝 对 路 径 和 文件 路 径 协 议 如 fs://、widget:// 等 
}, function(ret,err){ 
//ret = {status:true,data:""} 
//err = {code:0,msg:""} 
}); 
api .writeFilel({ 
path:"PathToFile",// 文 件 路 径 , 支持 绝对 路 径 和 文件 路 径 协 议 如 fs://、cache:// 等 , 不 支持 widget:// 目 录 ， 





该 目录 只 读 


data:"data", // 文 件 内 容 
append:false// 是 否 以 追加 方式 写 入 数据 ， 默 认 false， 会 清除 之 前 文件 内 容 
}, function(ret,err){ 
//ret = {status:true} 
//err = {code:0,msg:""} 
}); 

































































关于 API 的 详细 信息 请 参阅 文档 。 如 果 想 获得 更 多 对 文件 操作 的 能 力 请 使 用 “fs” 模 块 : 



































Var fs = api.require('fs'); 


// 创建 文件 
fs.createFilel({ 

path:'path/to/file' // 文 件 路 径 
}, function(ret,err)t{ 

//ret = {status: true} 是 否 成 功 
}) 


// 删除 文件 

fs .zemove ( 
Path:'path/to/file'  // 文 件 路 径 

},function(ret,err)t{ 


//ret = {status: true} 是 否 成 功 
说 
// 获取 文件 数据 的 MD5 值 
fs.getMD5( 


path:'path/to/file'  // 文 件 路 径 
},:function(req,err)t{ 
//req = 
// ”status:true， 是 否 成 功 
// ”md5Str:'， 文件 数据 的 MD5 值 
A 





}) 



































I 














“fs” 模 块 还 提供 了 很 多 操作 文件 和 目录 的 方法 ， 请 参阅 相关 文档 。 关 于 如 何 引 入 第 三 方 模 
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块 会 在 后 面 的 章节 中 介绍 。 



































4.2.4 database 


也 用 “db” 模块 操作 数据 库 ，“db” 模 块 封装 了 手 
现 数据 的 本 地 存储 ， 极 大 地 简化 了 数据 持久 化 问题 ， 并 





上 











机 常用 数据 库 sqlite 的 增删 改 查 语句 ， 可 实 
支持 同步 接口 。 db” 模 块 的 使 用 如 下 
























































dl 






































t 











var db = api.require('db'); 





// 打 开 数 据 库 ， 若 不 存在 则 创建 新 的 数据 库 
qb .openDatabase ({ 
name: 'name'， // 数 据 库 名 称 
path:'path' // 数 据 库 所 在 路 径 ， 不 传 时 使 用 默认 创建 的 路 径 ， 可 选 
}, function(ret, err) { 
//ret = {status:true} 是 否 创建 成 功 
后 
































// 关 闭 数据 库 
db.closeDatabase({ 
name: 'name'// 数 据 库 名 称 


}, function(ret, err) { 


//ret = { 
// ”status:true 是 否 成 功 
//} 
}); 
// 执 行 SQL 语 句 


db.executeSql({ 
name: 'name',// 数据 库 名 称 
Sql: 'CREATE TABLE Persons(Id P int, LastName varchar (255), FirstName varchar (255), A 
ddress varchar (255)，City varchar (255))'// 要 执行 的 SQL 语 句 
}, function(ret, err) { 
//ret = {status:true} 是 否 执 行 成 功 


1); 





// 查询 SQL 
db.selectSql({ 
name: 'name',// 数 据 库 名 称 
sql: 'SELECT * FROM Persons'// 查询 SQL 字符 串 
}, function(ret, err) { 
//ret = { 








// status:true， 是 否 执 行 成 功 
// data:[] 查询 到 的 数据 
| 


}); 

















关于 “db” 模 块 的 更 多 内 容 请 参阅 相关 文档 。 








4.2.5 存储 容量 
APICloud 提供 了 关于 存储 容量 的 API， 代 码 如 下 : 
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api.getFreeDiskSpace({ 
sync:false// 执 行 结果 的 返 
7 function(ret,err)t{ 

//ret = {size:1024} 剩余 存储 空间 大 小 ， 单 位 为 Byte， 数 字 类 轨 
储 设备 -3 ; 无 法 访问 存储 设备 ) 


); 


设备 -3 : 无 法 访问 存储 设备 ) 
); 


api.getCacheSizel({ 


法 访问 存储 设备 ) 
); 


api.clearCache ({ 


// 清 除 完成 
) 7 





4.2.6 沙 箱 机 制 


在 Android 和 iOS 

















api.getTotalSpace ({ 

sync:false // 执 行 结果 的 返 

7 function(ret,err){ 
//ret = {size:1024} 














总 存储 空间 大 小 ， 身 








sync:false// 执 行 结果 的 返 
, function (ret err)1{ 











方式 。 为 false 时 通过 callback 返 回 ， 为 true 时 直接 返 



































方式 。 为 false 时 通过 callback 返 回 ， 为 true 时 直接 返 

















//ret = {size} 缓存 














timeThreshold:10//( 可 选项 ) 清除 多 少 天 前 的 缓存 ， 默 认 0 
7 function(ret,err){ 











位 为 Byte， 数字 类 型 。(-1 : 无 存储 设备 -2 : 了 




































































e Android 的 默认 沙 箱 位 





己 文件 系统 的 沙 箱 区 域 。 


虚拟 沙 箱 的 机 制 来 保障 数据 存储 的 安全 和 痢 
沙 箱 位 置 如 下 。 





















































: sdcard/UZMap/appId。 


e。 iOS 的 默认 沙 箱 位 置 : Documents/uzfs/appId。 











可 以 通过 修改 config .xml 











<widget idq="RA1234567890 











































































































通过 以 上 配置 ，App 将 在 Android 手 
的 目录 ， 并 以 该 目录 作为 本 App 的 沙 箱 目录 ，App 运行 过 程 中 动态 产生 的 资源 文人 















































录 及 其 子 目录 下 ， 并 























4.2.7 资源 访问 协议 


APICloud 资源 被 存放 在 App 安装 包 (ipa 包 或 者 apk 包 ) 中 或 应 








APICloud 应 用 虚拟 沙 箱 























的 sandbox 属性 来 指定 Android 沙 箱 位 置 : 











sandbox="myBox"> 














| 








机 的 外 部 存储 (如 SD 卡 ) 的 根 目录 


























可， 默认 false 





型 。(-1 : 无 存储 设备 -2 : 正在 准备 USB 存 


方式 。 为 false 时 通过 callback 返 回 ， 为 true 时 直接 返回 ， 默 认 false 


E 在 准备 USB 存 储 


回 ， 默 认 false 


小 ， 单 位 为 Byte， 数 字 类 型 。(-1 : 无 存储 设备 -2 : 正在 准备 USB 存储 设备 -3 : 无 














RTY ， App 只 能 访 问 


建立 名 为 “myBox” 














并 






























































< 资源 不 会 随 着 App 的 和 扼 载 而 清除 。 

















分 配 的 空间 ， 不 可 见 ， 只 人 允 讨 












































Ah =| 





将 存储 在 该 












































和 Native 应 用 真实 沙 箱 ， 真 实 沙 箱 是 操作 系统 为 App 在 设 








沙 箱 沙 箱 分 为 
备 内 部 存储 上 
































F App 本 身 访 问 。 访 问 这 些 位 置 的 资源 可 以 使 


了 




















如 下 协议 : 
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。 widget// (访问 安装 包 中 的 资源 ， 根 目录 指向 你 的 项 目 代码 根 路 径 ， 即 widget 路 径 。 只 

读 属性 )，; 
。 fs://( 访 问 APICloud 应 用 虚拟 沙 箱 中 资源 ， 根 目录 指向 4.2.6 节 描述 的 目录 ， 可 读 可 写 )， 
。 cache:// (访问 本 地 缓存 中 的 资源 ， 存 储 在 该 路 径 下 的 资源 ， 在 调用 api.clearCache 时 将 
被 清除 。 可 读 可 写 )， 
。 box:// (访问 应 用 真实 沙 箱 中 的 资源 ， 私 密 数 据 建议 使 用 本 协议 操作 。 可 读 可 写 )。 
相关 路 径 可 以 通过 如 下 代码 获取 : 





属 





















































































































































































































































Pm 








。 apiwgtDir (返回 widget 包 根 路 径 ); 

。 apifsDir (返回 APICloud 应 用 虚拟 沙 箱根 路 径 )， 
。 api.cacheDir (返回 缓存 根 路 径 ); 

e。 api.boxDir (返回 应 用 真实 沙 箱根 路 径 )。 

























































































4.2.8 图 片 缓存 

















对 于 图 片 缓存 ， 可 使 用 如 下 代码 ; 























var img = $api.byId("myImg"); 
api.imageCache ({ 
url:'http://example.com/dir/file.png' 
}， function (ret,err){ 
ifl(ret && ret.status == 七 Tue)1{ 
img.src = ret.url; 
} 
elsel{ 
// 处 理 错误 
} 


}); 















































上 述 代码 首先 在 参数 中 指定 了 要 缓存 的 远程 图 片 路 径 (ur1) ， 在 之 后 的 回调 函数 中 判断 是 



























































否 缓存 成 功 (if(ret && ret.status == true){})， 如 果 成 功 就 可 以 使 用 ret.url 来 更 新 


<img> 标签 。ret .url 是 图 片 缓 存 到 本 地 后 的 路 径 。 







































































加 
开 
ll 
站 
演 
EY 
雪 
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地 存储 上 面 ， 下 次 









































这 里 实现 了 图 片 缓存 ，App 在 第 一 次 从 指定 位 置 加 载 区 






































时 会 直接 调用 缓存 ， 以 此 提升 加 载 速 度 和 泻 染 效率 。 





















































关于 API 更 详细 的 信息 请 参阅 相关 文档 。 




















4.3 下 拉 刷 新 、 上 拉 加 载 的 实现 


















































刷新 和 上 拉 加 载 功能 ， 在 列表 页 用 户 可 以 下 拉 页 面 进 行 刷新 、 上 拉 


A 
el 
A 
> 
ro 
3 
2 
TA 
4 
| 
这 
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到 页 面 底部 以 加 载 更 多 内 容 ， 本 节 将 介绍 这 些 功能 。 


4.3.1 下 拉 刷 新 
使 用 API 可 以 直接 定义 下 拉 刷 新 功能 ， 代 码 如 下 ， 














HT 






































api.setRefreshHeaderInfol({ 
loadingImg: 'widget://image/refresh.png', 
bgcolor: "#6ecce" 
textooLors: “#EEE™. 
textDown: ! 下拉 刷新 ...'"， 
textUp: ' 松 开 刷 新 ...'， 
ShowTime : true 





}, function(ret, err){ 
//TODO api.ajax() 
// 这 里 去 加 载 数据 ， 加 载 完 成 后 调用 : 
api.refreshHeaderLoadDone () 恢复 刷新 状态 
]) 7 


















































瑟 
































C1 





在 参数 中 设置 下 拉 刷 新 组 件 的 表现 ， 回 调 函 数 会 在 下 拉 后 触发 此 会 在 这 里 执行 下 拉 触 发 
后 的 逻辑 。 最 后 在 适当 地 方 关闭 下 拉 刷 新 组 件 。APICloud 模块 Store 中 还 有 很 多 其 他 开发 者 提供 
的 各 种 UI 效果 的 下 拉 刷 新 模块 ， 只 需 将 其 勾 选 到 App 模块 列表 中 并 按照 对 应 的 API 使 用 即 可 。 


4.3.2 上 拉 加 载 


上 拉 加 载 功 能 需要 通过 监听 scrolltobottom 

















































































































































































































jn 





有 件 实现 ， 代 码 如 下 : 


api.addEventListener({ 
name: 'scrolltobottom', 
extra: { 


threshold: 300 // 距离 底部 还 有 多 少 触 发 scrol1ltobottom 事 件 
} 
}, function(ret, err) { 


// 触发 执行 
}); 














4 
| 
Rs 
































调 函 数 中 加 载 更 多 数据 并 显示 即 可 。 





4.4 事件 机 制 


有 件 机 制 是 APICloud App 的 重要 机 制 ， 通 过 事件 机 制 App 可 以 进行 页 
引擎 之 间 的 通信 ， 也 可 以 实现 复杂 JavaScript 异步 调用 的 解 耦 。 


4.4.1 统一 事件 管理 


APICloud 全 局 事件 机 制 ， 如 图 4-2 所 示 。 


hl 













































































内 部 、 页 面 之 间 、 


人 
































dr 


贝 国 
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”设备 
8 addEventListener 9 交互 
9 removeEventListener EventM anager 应 用 
» sendEvent | a 
9 自 定义 
图 4 一 2 


















































APICloud 事件 与 标准 DOM 事件 使 用 方法 基本 相同 ， 需 要 注意 的 区 别 是 : DOM 事件 是 
页 面 的 事件 ， 而 APICloud 扩展 事件 都 是 全 局 事件 ， 在 整个 App 中 全 局 有 效 ， 是 由 APICloud 引 
擎 统一 进行 事件 管理 的 。 所 有 APICloud 扩展 事件 都 会 被 放 入 事件 队列 中 ， 引 警 执行 过 程 中 会 遍 
历 处 理 这 些 事件 。 


































































































































































































































































































4.4.2 事件 管理 API 


通过 下 面 的 API 管理 事件 : 







































































// 监 听 事 件 
api.addEventListener( 
name:"event name"y // 事 件 名 称 
extra:{ 
key :value// 附加 信息 
} 
}, function(ret,err)t{ 
//ret 为 事件 信息 ， 通 过 ret .value 获得 发 送 事 件 时 的 附加 信息 
1); 

















// 移 除 事件 监听 器 

api .removeEventListener ({ 
name:"event name" // 事 件 名 称 

1); 





// 发 送 事 件 
api.sendEvent ({ 








name:"event name",// 事 件 名 称 
extra:{}// 附加 信息 ， 字 符 串 或 JSON 对 象 
]) 7 
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4.4.3 


一 


加 载 台 


平台 事件 类 型 





新 服务 端 数据 ， 实 现 本 地 的 数据 存储 





























平台 提供 的 寻 








设备 相关 
























































量 ] 





三 上 
日 


(2) 网 络 相关 


网 络 状 态 : online、ofhine。 


云 修 复 完 成 : smartupdatefinish 。 


(3) 交互 相关 













































































理 按 键 : keyback、keymenu。 


昌 量 : batterylow、 batterystatus。 


安 键 : volumeup 、volumedown 。 


页 面 滚 动 到 底部 : scrolltobottom 。 


窗口 全 局 点 击 : tap。 
窗 :longpress。 
状态 栏 通知 被 点 击 : noticeclicked。 


启动 








页 被 点 下 























相 六 











显示 : viewappear。 











































































































FE: launchviewclicked, 























安 
窗口 隐藏 : Viewdisabbear。 
应 用 相关 
可 到 六 人 台 : resume。 
进入 后 台 : bause 。 
被 其 他 应 用 调用 : appintent。 
于 APICloud 扩展 的 更 多 事件 请 参阅 





件 全 部 为 英文 小 写 ， 它 们 包括 如 下 内 容 。 


手势 : swipeup、swipedown、swipeleft、swiperight。 


api 对 象 文档 。 
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4.5 常用 对 话 框 窗口 


APICloud 提 供 了 简便 的 API 来 显示 对 话 框 ， 这 些 对 话 框 包含 了 实现 大 部 分 用 户 交 互 的 需求 。 
例如 在 询问 用 户 是 否 同意 某 项 操作 时 ， 使 用 api.confirm (0) 即 可 ， 不 必 设 计 单独 的 页 面 。 这 些 
API 的 内 容 如 下 。 




























































































dl 












































(1) 提示 对 话机 





TH 


eo abi.alert() ; 
e abi.confirm( ; 
e apiprompt() ; 


eabi.toast() 。 





(2) 状态 对 话 





TH 


eabi.showProgress() ; 


e abi.hideProgress() 。 


(3) 选择 对 话 





TFI 





e abi.actionSheet() ; 


eabi.openPicker() 。 














(4) 其 他 : 


e。 dialogBox 模块 等 。 




















其 中 的 api .confirm() 为 : 





api.confirm({ 


title:"title",// 标 题 ， 可 选 
msg:"message",// 内容 ， 可 选 




















buttons: ["buttonl"v "button2"] // 按 钮 标题 ,， 若 小 于 两 个 按钮 ， 会 补 齐 两 个 按钮 ， 若 大 于 3 个 按钮 ， 则 使 用 前 

3 个 按钮 ， 可 选 
}， function(ret,err){ 
//ret.buttonIndex 按钮 点 击 序号 ， 从 1 开始 











}); 








































































































， 具 有 指定 的 提示 信息 且 具 有 几 个 按钮 供用 户 点 击 。 其 中 api. 














这 里 弹出 了 一 个 对 话 收 


prompt () 为 : 














[HH 
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api.prompt ({ 
title:' 标 题 '， 

msg:" 信息 wa 
text :' 输入 框 默认 文字 '， 
buttons: [' 确 定 '，' 取消 '] 

}, function(ret, err) { 

ret .buttonIndex;// 被 点 击 的 按钮 序号 ， 
ret .text:; 














从 1 开始 





Var index = 
var text = 
}); 























































































































































































































api.prompt () 与 api.confirm() 类 似 ， 但 是 多 了 一 个 输入 框 。 
api.showProgress () 和 api.hidqeProgress () 可 用 于 显示 一 个 加 载 对 话 杠 ， 示 例如 下 : 
api.showProgress ({ 
title:' 加载 中 '， 
text : ' 请 稍 等 …' 
}) 
// 在 适当 的 时 候 调 用 : 
api.hideProgress () 
api.actionSsheet () 用 于 显示 一 组 操作 ， 例 如 获取 图 片 时 可 以 选择 从 图 片 库 或 照相 机 中 获 
取 ， 示 例如 下 : 
api.actionSheet ({ 
title: ' 选 择 图 片 '， 
cancelTitle: ' 取 消 '， 
buttons: [' 照 相机 ',' 图 片 库 '] 
}: function(ret, SEr) + 
var index = ret.buttonIndex;// 选 择 的 按钮 序号 ， 从 1 开始 
}); 
dialogBox 模块 封装 了 多 种 不 同 风格 的 对 话 框 ， 每 一 种 风格 都 提供 一 个 接口 来 调用 ， 开 发 者 可 按 
照 各 个 接口 的 样式 来 自 定义 对 话 框 上 的 文字 、 图 片 样式 等 。 关 于 dialogBox 的 更 多 内 容 请 参阅 官方 









































文档 。 








4.6 在 指定 的 窗口 中 执行 脚本 














api.execScript () 可 以 在 指定 的 Window 或 者 Frame 














面 的 Frame 也 






































var fn = '!Sapi.html(S$Sapi.byIQ("tiLLe") ， 
api .execScript ({ 
name:"winName", 
frameName:"frameName", 
script:fn 


"abcn) 7 





效 ; 若 name 和 frameName 都 未 指定 ， 则 在 当前 


执行 脚本 ， 对 于 frameGroup 里 








Window 


















































执行 脚本 。 示 例如 下 : 
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77 


这 段 代 码 将 在 名 为 winName 的 Window 下 ， 对 应 名 为 frameName 的 Frame 内 执行 血 对 应 

















的 代码 ， 将 目标 Frame 内 id 为 title 的 元 素 值 设置 为 “abc 。 


























4.7 加 载 更 新 服务 端 数据 ， 实 现 本 地 的 数据 存储 


本 节 将 带领 读者 为 示例 App 加 载 服务 器 数据 并 进行 本 地 存储 。 





























4.7.1 使 用 doT 横 板 引 擎 显示 商品 列表 














现在 将 第 3 章 中 的 商品 列表 通过 doT 模板 引擎 实现 。 将 doT 模板 引擎 的 JavaScript 文件 
























































制 到 项 目 “seript” 文 件 夹 下 。 

















在 html/main_frame.html 文件 <head></head> 标签 中 引入 doT 模板 引擎 : 











<script type="text/javascript" src="../script/doT.min.js"></script> 














了 




















在 <html></html> 标签 中 添加 下 面 的 代码 : 








<script type="text/template" id="wareTemplate"> 
{{~ it:ware:index }} 
<div class="ware"> 
<div class="content"> 
<img class="thumbnail" src="{{= ware.thumbnail.url }}"> 
<div class="info"> 
<div class="name">{{= ware.name }}</div> 
<div class="description">{{= ware.description }}</div> 
<div class="price-tag"> 
<span class="price">¥1{{= ware.price }}</span> 
<span class="unit">/{{= ware.unit }}</span> 
</div> 
<div class="origin-price"> 超 市 : 
<del>¥{{= ware.originPrice }}</del> 
</div> 
</div> 
<div class="control"> 
<img class="add" src="../image/add.png"> 
</div> 
</div> 
</divy> 
CE} 
</seript> 




















ww 


调 函 数 做 修改 如 下 : 





将 获取 商品 信息 的 











functionl(ret, err) 
if (ret) { 
Var strTemplate = S$api.htmll( 
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$api.byId ("wareTemplate") 
); 
Var fnTemplate = doT.template (strTemplate); 
strTemplate = fnTemplate (ret); 
Var list = $api.byId("list"); 
$api.html (list,strTemplate); 
} else { 
alert( JSON.stringify( err ) ); 












































先 利 用 之 前 学 到 的 doT 模板 引擎 的 知识 ， 将 模板 字符 串 写 在 <script></script> 标签 
。 然 后 在 请 求 到 商品 信息 后 执行 编译 模板 函数 和 生成 HIML 字符 串 ， 并 将 生成 后 的 HTML 
字符 串 显 示 到 页 面 上 。 编 译 模板 函数 的 操作 执行 一 次 即 可 ， 可 以 在 多 次 操作 中 复 用 ， 提 升 效率 。 
使 用 doT 模板 引擎 后 的 显示 效果 与 使 用 字符 串 拼 接 的 方式 一 致 ， 如 图 4-3 所 示 。 
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图 4-3 


4.7.2 实现 图 片 缓存 
修改 doT 模板 中 商品 图 片 的 代码 为 ， 
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<img onload="fnLoadImage (this)" data-url="{{= ware.thumbnail.url }}" class="thumbnail" sr 
c="../image/default_rect.png"> 














在 <script></script> 标签 中 添加 代码 : 








function fnLoadImage (ele_) { 
Var dataUrl = $api.attrl(ele_, 'data-url'); 
站 ataueLly 4 
api.imageCache({ 
urls dataUrl 
}， function(ret, err) { 
if (ret) { 
ele_.src = ret.url; 
























































这 里 先 在 模板 引擎 中 将 图 像 ud 放 入 <img> 的 gata-url 属性 中 ， 在 onload 被 调用 时 读 取 data- 
url 属性 并 调用 api. imagecache () 进行 缓存 ， 最 后 将 缓存 结果 给 <img> 的 src 属性 来 进行 图 片 加 载 。 
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| 
下 














4.7.3 实现 下 拉 刷 新 
接 下 来 实现 下 拉 刷 新 功能 。 在 html/main_frame.html 中 的 apiready 国 数 里 加 入 : 












































fnLoadWares () 
api.setRefreshHeaderInfo ({ 
loadingImg: "widget://image/refresh.png'v 
baCcolors: 4 
textColor: '#el017e'， 
ShowTime : 七 Tue 
}， function (ret， err) { 
fnLoadWares () 
]) 7 




















将 获取 商品 列表 的 代码 段 移出 apiready 函数 ， 封 装 为 函数 fnLoadWares () 并 进行 适当 修 
改 ， 示 例如 下 : 











function fnLoadWares (){ 
Var params = { 
fields: {}, 
where: { 
supportAreald: "56c80e0c789b068408ab5a6f"， 
wareTypelId: api.pageParam.wareTyPeIQ 


api.ajax({ 
url: 'http://d.apicloud.com/mcm/api/ware?filter=' + $api.jsonToStr (params), 
method: "get", 
headers: { 
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"X-APICloud-AppId": "A6921544633372", 
"X-APICloud-AppKey": "2672b5911d8551540clea598e01c87fee217ale5.1482500122476" 


} 
}, function (zet， err)t{ 

api.refreshHeaderLoadDone (); 

if (ret) 


Var strTemplate = S$api.html ($api.byId("wareTemplate")); 


Var fnTemplate = doT.template (strTemplate); 





strTemplate = fnTemplate (ret); 
Var list = $api.byId("list"); 
$api.html (list,strTemplate); 


} else { 


alert (JSON .stringify (err)); 









































在 apiready 函数 中 ， 页 面 


-光电 下 证 





的 三 候 了 






































加 载 一 次 商品 列表 ， 接 着 会 通过 api. 























亏 0 
Pe 


setRefreshHeaderInfo() 流 














新 组 件 ， 在 下 拉 六 















































二 
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列表 。 最 后 修改 了 api.ajax() 的 区 
关闭 下 拉 刷 新 组 件 ， 如 图 4-4 所 示 。 














国 数 ， 获 取 商 





刷新 中 


是 二 更 新 3N17-19-13 133937 


佳 沛 经 奇 异 果 


Y189 


泰 因 大 狠 


四 川 丑 析 


¥249 





行 后 〈 回 调 函 数 被 执行 ) 会 再 次 加 载 商品 
品 列 表 后 通过 api.refreshHeaqderLoadqdDone () 
































4-4 
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4.7.4 实现 上 拉 加 载 更 多 























api.addEventListener({ 
name: 'scrolltobottom', 
extra: { 


在 html/main_frame.html 中 的 apiready 国 数 里 添加 : 








threshold: 300 // 距离 底部 还 有 多 少 触发 scrolltobottom 事 件 


} 
yr function(ret, Srr) { 
// 获取 更 多 的 商品 


fnLoadWares (true); 





]) 7 


修改 fnLoadWares () 函数 为 : 


var Skip = 0; 
Var limit = 57 
function fnLoadWares (more){ 
if (more){ 
skip += limit; 


} elset 
Skip = 0; 
} 
var params = { 
fields: {}, 
where: { 
supportAreald: "56c80e0c789b068408ab5a6f" 


wareTypeId: api.pageParam.wareTypelId 


} 
skip: Skips 
Tmite Timit 
jj 
api.ajax({ 


url: 'http://d.apicloud.com/mcm/api/ware?filter=' + $api.jsonToSstr (params), 


method: "get", 
headers: { 
"Xx-APICloud-AppId": 
"X-APICloud-AppKey": 
} 
}, function(ret, err)f{ 
if (ret) { 


"A6921544633372", 
"2672b5911d8551540clea598e01lc87fee217ale5.1482500122476" 


Var strTemplate = $api.html ($api.byId("wareTemplate")); 


Var fnTemplate = doT 
strTemplate = fnTemp 


.template (strTemplate); 
late (ret); 


Var list = Sapi.byId("list")} 


if (more){ 


$api.append(list,strTemplate); 


}elsel 


$api.html (list,strTemplate); 


| 

api.refreshHeaderLoadD 
} else { 

alert ( JSON.stringify( 


}); 


one () 7 


SE 
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居 存 储 
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82 EE 
这 里 首先 通过 api.addEventListener() 监听 scrolltobottom 事件 ， 然 后 在 事件 触发 后 调用 
fnLoadwares (true) 来 加 载 更 多 的 商品 。fnLoadWares () 函数 的 唯一 参数 表示 是 否 是 加 载 更 多 。 然 后 
将 skip 和 limit 字段 提出 ， 当 加 载 更 多 时 更 新 skip 的 数值 即 可 。 最 后 在 输出 内 容 时 分 别 使 用 $api. 
不 同 的 情况 ， 在 “零食 ”列表 下 可 以 体验 效果 ， 如 图 4-5 所 示 。 























html () 和 $api .append() 来 处 理 





新 疆 幸 福 轩 核桃 



























































































































































































































































图 4-5 
4.7.5 实现 保存 登录 信息 
接 下 来 实现 保存 登录 信息 ， 这 里 会 用 到 本 地 存储 。 在 用 户 未 登录 时 如 果 点 击 右上 角 的 个 人 
心 按钮 ， 会 跳 转 到 登录 页 面 ， 如 果 用 户 已 登录 则 会 跳 转 到 个 人 中 心 页 面 。 
请 先 完 成 个 人 中 心 的 静态 页 面 html/personalcenter.html 和 html/personalcenter_frame.html。 
登录 请 求 的 回调 函数 为 : 





























修改 html/login_frame.html 


function(ret, err){ 
if (ret && ret.userId) { 





4.7 ”加 载 更 新 服 


$api.setStorage('userIinfo', ret); 
api.closeToWin({ 
name: 'main' 

3 

} else { 
alert (" 登录 失败 ") ; 

} 

} 
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这 里 首先 将 登录 成 功 返 


Window 栈 里 的 所 有 Window， 
































Th 




















function fnOpenPersonalCenterWin(){ 
Var userInfo = $api.getSstorage('userIinfo'); 
if(userIinfo)t{ 
api.openWin({ 

name: 'personalcenter', 

url: './personalcenter.html', 

pageParam: { 

userId: userInfo,.userId 


api.openWin(t{ 

name: 'login', 

rl TT /Login. heml? 
}); 


条 结果 保存 到 本 地 存储 的 userInfo 字段 
到 名 称 为 main 的 Window ( 




















页 ) 。 



































这 里 先 获取 本 地 存储 中 的 userInfo 字段 ， 如 果 获 取 到 ， 则 打开 个 人 
























































的 userId 作为 参数 。 如 果 获 取 不 到 则 的 录 页 面 。 








关闭 当前 








El 



















































































点 击 个 人 中 心 左 下 角 的 设置 按钮 进入 设置 页 面 ， 完 成 设 
和 html/setting_frame.html 的 编写 。 
















































































页 面 的 静态 页 天 






























































打开 html/setting_frame.html， 为 退出 登录 按钮 添加 点 击 事 件 : 





function fnLogout () { 
api.confirm({ 
title: ' 提 示 '， 
msg: ' 是 否 退 出 登录 '， 
buttons: [' 确 定 '，' 取消 '] 
}, function(ret, err) { 
if (ret) { 
if (1 == ret.buttonIndex) { 
$api.rmSstorage('userIinfo'); 
api.closeToWin({ 
name: 'main' 























IT 






































html/setting.html 
























































api.comfirm() 来 弹出 交互 对 话 框 。 在 用 户 











[i 
出 
I 
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生 某 个 按 生 
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调 函 数 ， 
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区 


ret .buttonIndex 是 用 户 点 击 的 按钮 索引 ， 如 





4-6 所 示 。 








是 否 退出 登录 





图 4-6 




























































































在 个 人 中 心 页 面 内 ,个 人 信息 可 以 通过 调用 相关 的 API 获取 ， 用 户 ID 可 以 通过 api. 
pageParam.userId 获取 。 请 自行 完成 这 些 功 能 。 






































4.7.6 实现 请 除 缓存 


下面 实现 清除 缓存 的 功能 ， 打 开 html/setting_frame.html， 在 apiready 国 数 中 搬入: 










































































api .getCacheSize (function(ret) { 
Var size = ret.size; 
size = parseInt ((size / 1024 / 1024) * 100) / 100; 
Var cacheSize = S$api.byId('cacheSize'); 
$api.html (cacheSize,size + ' M'); 
1 
































这 里 通过 api .getCacheSize() 获取 缓存 大 小 ， 并 将 它 显 示 到 页 面 上 。 












































为 “清除 缓存 ”按钮 添加 点 击 事 企 

















Ee 











function fnClearCache () { 
api.clearCache (function(){ 
api.toast ({ 
msg: ' 缓存 清除 完毕 ' 
}) 
setTimeout (function(){ 
getCachesize(); 
}, 300); 
}); 


一 

























































































这 里 通过 api.clearCcache () 清除 缓存 ， 之 后 弹出 提示 并 在 一 定时 间 后 重新 获取 缓存 大 小 ， 
4 7 所 示 。 























二 3.1b 


< 设置 


关于 
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ER 


缓存 清除 


中 
+ 
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4.8 小 结 




















本 章 学习 了 doT 模板 引擎 的 基本 用 法 、 本 地 存储 和 图 片 缓存 的 概念 及 实现 方法 、 下 拉 刷 新 
和 上 拉 加 载 的 实现 方法 、APICloud 沙 箱 结构 的 概念 和 资源 访问 协议 的 用 法 、 常 用 对 话 框 窗口 的 
使 用 方法 、 窗 口 间 的 通信 方法 和 APICloud 平台 的 事件 机 制 。 
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第 5 章 
使 用 扩展 模块 API， 完 成 App 所 需 功能 实现 





主要 内 容 

本 章 主要 讲解 APICloud 中 扩展 模块 的 使 用 。 在 示例 项 目 中 ， 图 片 轮 播 、 原 生 输入 框 、 地 址 
选择 菜单 等 都 是 通过 模块 实现 的 。 
学 习 目标 

(1) 了 解 模块 的 基本 概念 。 

(2) 了 解 如 何 自 定义 扩展 模块 。 

(3) 学 习 使 用 UIScrollPicture、UIInput 和 UIActionSelector。 





5.1 APICloud 扩展 模块 87 


5.1 APICloud 扩展 模块 


APICloud 是 以 模块 的 形式 进行 API 的 组 织 和 ， 基 于 APICloud 模块 扩展 机 制 
APICloud 官方 、 第 三 方 机 构 和 社区 开发 者 为 J UI 和 功能 提供 了 大 量 的 扩展 模块 。 开 发 
可 根据 自己 的 需要 灵活 选择 相应 模块 ， 高 度 定制 自己 的 App。 
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5.1.1 APICloud 端 引擎 架构 


如 图 5-1 所 示 ， 这 是 APICloud 端 引 擎 的 架构 示意 图 。APICloud 中 许多 功能 是 通过 不 同 的 模 
块 提供 的 ， 如 果 现 有 模块 不 能 满足 开发 者 的 需求 ， 也 可 以 将 所 需 功能 开发 成 新 的 模块 并 发 布 出 来 。 






































































































































API 


| 
1 1 
| | 
1 和 1 
| Framework | 

| 
! | 
1 

| 





Engine 


| | 
| 1 
| | 
1 | 
! Widget Window Event ! | 
| | 
村 | 
| 1 
| 

| 
Command Service Access | 
1 | | 
| | | 
| ! 
| 1 1 
0 Ell 
| 

| 
| 
1 ! 


| 
| 
| 
HTML Parser CSS Parser JavaScript Engine Hybrid Render 1 | 
| 
1 












































整个 端 引擎 架构 分 为 4 层 ， 最 上 层 是 App。 开 发 APICloud App 使 用 的 是 标准 的 HTML、 
CSS 和 JavaScript。APICloud 所 有 扩展 的 能 力 都 是 通过 JavaScript 的 API 来 提供 的 。 




























































































API 层 包括 4 个 主要 的 功能 模块 : Framework 是 前 端 框架 ， 如 APICloud 官方 提供 的 apijs 或 
其 他 移动 端 框架 都 属于 Framework ; Profile 通常 用 于 提供 APICloud API 到 其 他 平台 的 接口 转换 
( 如 微 信 或 PhoneGap) ; Loader 实现 模块 的 加 载 ， 当 调用 api.require() 方法 时 会 使 用 Loader 
模块 来 加 载 指定 模块 ; Bridge 负责 API 的 桥接 ， 当 通过 JavaScript 调用 模块 的 方法 时 Bridge 模块 
会 将 调用 桥接 到 引擎 或 模块 的 方法 中 。 













































































































































































































































































引擎 层 包括 12 个 主要 模块 : Widget、Window、Event 和 Command 模块 在 之 前 的 章节 已 经 
介绍 过 了 ; Model 是 对 APICloud 数据 云 中 的 数据 模型 进行 管理 ; Service 是 用 于 管理 APICloud 提 


J 


供 的 云端 服务 ， 如 版 本 管理 、 云 修复 、 闪 屏 广 告 等; Access 就 是 实现 上 一 章 介 绍 过 的 应 用 沙 箱 
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“ 展 模 块 API， 完 成 Apb 所 需 功能 实现 




































































TH 

















和 访问 协议 等 ; Module 是 用 来 管理 模块 的 生命 周期 和 方法 调用 。Module 层 中 包括 各 类 封装 好 的 
模块 ， 可 以 通过 api.require() 来 引入 。HTML 解析 器 、CSS 解析 器 、JavaScript 引擎 是 负责 
HTML5 代码 的 解析 和 泻 染 ; Hybrid Render 则 是 APICloud 核心 的 混合 泻 染 模块 。 



























































OS 层 是 操 F 系 统 接 o 








5.1.2 APICloud 模 块 调 用 过 程 


















































模块 的 调用 过 程 如 图 5-2 所 示 ， 在 App 中 调用 模块 首先 需要 运行 api.require() 。 引 警 收 
到 require 命令 后 会 去 初始 化 模块 。 通 过 JavaScript 调用 模块 方法 时 引擎 会 桥接 到 模块 上 的 对 应 方 
法 。APICloud 模块 中 的 大 部 分 方法 都 是 异步 的 ， 需 要 在 调用 时 传 入 回调 函数 。 当 模块 有 数据 返 
可 的 时 候 ， 就 会 通过 notify 的 形式 来 通知 引擎 ， 并 将 模块 处 理 完 的 数据 交 给 引擎 ， 人 然后 引擎 找 
到 调用 这 个 方法 时 所 传递 过 来 的 callback 函数 ， 再 通过 调用 callback 的 方式 ， 将 数据 返回 给 App。 














































































































































































































































































































| api.require() | we | callback() 


| load | bridge | notify 


图 5 一 2 


5.2 上 自 定义 模块 


APICloud 提供 了 标准 的 模块 扩展 机 制 ， 开 发 者 可 以 非常 方便 地 将 原生 功能 封装 为 APICloud 
模块 。 目 前 APICloud 平台 中 大 量 的 非 官方 模块 就 是 由 第 三 方 服务 三 商 或 个 人 开发 者 按照 
APICloud 模块 扩展 机 制 来 自 定义 扩展 的 。 




















































































































































































































定义 扩展 模块 需要 按照 如 下 步骤 进行 。 

















(1) 绑 定 : JavaScript 对 象 与 Native 模块 实例 绑 定 。 



































(2) 桥接 : 通过 module.json 文件 声明 JavaScript 对 象 与 Native 模块 接口 的 对 应 关系 。 









































(3) 生命 周期 : 通过 引擎 Native 接口 实现 App 生命 周期 同步 ， 如 创建 、 初 始 化 、 资 源 释放 、 
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销毁 等 。 

(4) 界面 布局 : UI 模块 独立 渲染 ， 可 以 添加 到 Window 或 Frame 中 进行 混合 布局 。 

更 多 信息 参阅 官方 文档 : Android 模块 开发 指南 、iOS 模块 开发 指南 、 模 块 设 计 规 范 、 
Android 模块 审核 规范 、iOS 模块 审核 规范 、 自 定义 模块 使 用 说 明 、APICloud 官方 开源 模块 
































仓库 9， 





5.3 ”使用 UISerollPicture 


UIScrollPicture 是 一 个 图 片 轮 播 模块 ， 只 需 传 入 一 组 图 片 地 址 ， 即 可 实现 图 片 轮 播 效果 。 













































































open 接口 内 的 rect 参数 ， 可 控制 图 片 轮 播 区 域 的 位 置 和 大 小 。styles 参数 可 以 设置 轮 播 视图 
底部 的 标题 文字 大 小 及 颜色 ， 亦 可 设置 底部 页 面 控制 器 〈 几 个 小 圆 点 ) 的 位 置 和 样式 。 

































































































































































通常 ，App 的 首页 新 闻 或 广告 轮 播 展 示 是 无 限 循环 自动 播放 的 ， 使 用 本 模块 可 以 快速 实现 
相同 的 功能 ， 只 须 在 调用 open 接口 时 传 入 loop 参数 值 为 auto 即 可 。 每 张 图 片 自 动 轮 播 的 时 间 
间隔 也 可 使 用 interval 参数 进行 自 定 义 。 另 外 ， 我 们 可 以 使 用 fixedOn 和 fixed 参数 ， 让 原生 模块 
到 真正 地 仍 入 网 页 内 ， 实 现 原生 视图 随 html 页 面 深 动 泻 染 的 效果 ， 提 升 用 户 体验 。 

















































































































































































































证 人 





































































































并 
区 






































四 片 轮 播 器 是 由 原生 代码 开发 ， 对 于 网 络 图 片 的 展示 更 加 人 性 化 。 模 块 内 部 会 做 缓存 处 
里 ， 第 一 次 加 载 网 络 图 片 时 ， 模 块 会 根据 其 路 径 生成 一 个 经 过 MD5 运算 的 图 片 名 ， 并 缓存 在 组 
存 文件 夹 里 。 当 用 户 下 次 打开 同 路 径 的 图 片 时 ， 模 块 将 直接 从 缓存 文件 内 读 取 该 图 片 ， 从 而 大 
节省 了 用 户 的 流量 。 由 于 原生 代码 相对 前 端 代码 来 说 更 具 高 效 性 ， 本 模块 相 比 于 前 端 实现 的 
片 轮 播 功能 会 更 加 流畅 ， 内 存 管理 得 以 优化 。 效 果 如 图 5-3 所 示 。 
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[= 明 API 生 态 平台 


开发 和 迁 代 








人 GitHub 上 搜索 “APICloud-Modules”。 
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下 























是 UIScrollPicture 的 使 





























使 用 扩展 模块 API， 完 成 App 所 需 功能 实现 


方法 : 


var UIScrollPicture = api.require('UIScrollPicture'); 
UIScrollPicture.open({ 


rect: { // 模块 的 显示 位 置 和 


xX: 
y: 
Ww: 
ks 


}, 


oO, 
oO, 
api .winWidth, 
api .winHeight 











尺寸 


data: { // 显示 图 片 的 地 址 和 标题 
paths: [ // 地 址 列表 
'widget://res/img/apicloud.png', 
'widget://res/img/apicloud-gray.png', 
'widget://res/img/apicloud.png', 
'widget://res/img/apicloud-gray.png' 


]， 








captionss: [ apicloua7i "apiceloud'; ‘'apicslo 


}, 


styles: { // 显示 样式 
caption: { // 标 题 样式 


} 





height: 35, 

Color: '#EOFFFF', 
size: 13, 

bgColor: "#696969", 
position: bottom’ 


indicator: { // 指 示 器 样式 


dots 

w:20, 

hl10r 

2 

margin:20 

}, 
align: 'center', 
olors "$FFFEFFE', 
activeColor: '#DA70D6' 





ud'，'"'apicloud'] // 标 题 列表 














} 
}, 
placeholderImg: 'widget://res/slidel.jpg'， // 网 络 图 片 未 加 载 完毕 时 ， 模 块 显示 的 占 位 图 片 ， 要 求 
本 地 路 径 (fs://、widget://) 
interval: 3, // 图 片 轮换 时 间 间 隔 ， 单 位 是 秒 (s) 
fixedon: api .frameName，// 模 块 视图 添加 到 指定 frame 的 名 字 (只 指 frame， 传 window 无 效 ) 
loop: true, // 是 否 循环 播放 


fixed: false 


}, 


function(ret, err) { 


//ret = { 
// status:true, 
// eventType:"click || show",//click 是 用 户 点 


// 
A 


index:0// 当前 图 片 的 索引 








// 模块 是 否 不 随 所 




















属 window 或 frame 滚动 














击 , show 是 模块 打 





多 内 容 请 参阅 官方 文档 (UIScrollPicture 部 分 ) 。 
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5.4 使 用 UImput 


打开 新 的 页 面 后 ， 会 立即 弹出 键盘 ， 这 是 App 中 很 常见 的 功能 ， 如 登录 注册 、 评 论 、 思 
等 页 面 。 在 大 量 的 实践 中 我 们 发 现 ， 标 准 HTML 的 input 标签 ， 在 实现 这 一 功能 时 ， 是 存 
兼容 问题 的 ， 不 同 厂商 的 手机 可 能 无 法 准确 的 弹出 键盘 。 为 了 解决 这 个 问题 ，APICloud 扩展 了 
UrInput 模块 ， 使 用 原生 的 方式 进行 适 配 。 
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UIInput 是 一 个 输入 框 模块 ， 开 发 者 可 通过 配置 相应 的 参数 来 控制 输入 框 自动 获取 焦点 ， 并 
弹出 键盘 。 同 普通 的 UI 类 模块 一 样 ， 该 模块 也 可 通过 rect 来 设置 其 位 置 和 大 小 ， 通 过 styles 参 
数 设置 其 样式 。 为 增强 输入 框 功能 ， 模 块 开 放 了 keyboardType 参数 ， 开 发 者 可 通过 设置 该 参数 
来 控制 其 键盘 类 型 ， 如 图 5-4 所 示 。 























seese 中 国 移动 4G 12:41 EE my 


< 修改 昵称 [ 保存 | 


wilsd ® 
完成 
123 vo?! ABC DEF 人 


英文 GHI JKL MNO AAA 
拼音 PQRS TUV  WXYZ 


图 业 选 拼音 空格 











图 5-4 
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下 面 














var UIInput = 
UIInput .open ({ 





rect: { 
上 才 


$y 


: 40 
地 
styles: { 

bgColor 

size: 1 

Solor: 

placeho 

color 

} 

}, 
autoFocus 


maxRows : 


placeholder: ' 这 是 一 个 输入 框 ',// 占 位 字符 串 

















是 UIInput 的 使 用 方法 : 








api.require('UIInput'); 


// 显 示 位 置 和 大 小 


至 
w: api.winWidth, 
h 


// 样 式 
3 和 
4, 
'#000"', 
lder: { 


.ae 











: false，// 是 否 自动 获取 焦点 
4， ”// 最 大 行 











keyboardType: 'number'，//default 默认 键盘 ,number 数字 键盘 , search 搜索 键盘 ,next 下 一 项 ， 
send 发 送 , done 完成 


inputType:"text"，// text 文本 ,password 密码 ( 当 maxRows = 1 时 有 效 ) 

fixedOon: api.frameName // 模块 视图 添加 到 指定 frame 的 名 字 (只 指 frame， 传 window 无 效 ) 
}, function(ret) { 

//ret = { 

// ”id:1,// 输 入 框 的 ia 


击发 送 按钮 , done 点 


// ”eventType = "show"//show 模块 打开 成 功 , change 输入 框 内 容 改 变 , search 点 者 
完成 按钮 





PA! 





























参阅 官方 文档 (UlInput 部 分 )。 








5.5 使 用 UIActionSelector 


UIActionSelector 是 一 个 支持 弹出 动画 的 多 级 选择 器 。 调 用 open 揭 
底部 弹出 一 个 action 选择 器 ， 该 选择 器 在 iOS 平台 上 是 立体 深 轮 效果 的 ， 











搜索 按钮 , sendq 点 




































































































































































维 平面 效果 的 。 开 发 者 可 自 定义 该 选择 器 的 数据 源 ， 利 用 此 模块 做 出 
司 部 门 选 择 器 或 有 亲 单 选择 器 等 各 种 不 同 的 选择 器 。 效 有 果 如 图 5-5 所 示 。 





















































， 会 从 当前 Window 


在 Android 平台 上 是 二 











个 城 站 





生地 





区 选择 器 、 公 











下 

















Var UIActionSelect 


面 是 UIActionSelector 的 使 
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使 
































方法 





or 


UIActionSelector.open(t{ 


datas: 
{ // 布 
5 每 
3， 
height: 30, 
12 7 
sizeActive: 


layout: 





row: 


Col: 


size: 


rowSpacing: 

colSpacing: 

maskBg: 

rgba(0;0,0,0.2) 
bg: 

CoOlor: 


二 

'#888 
ColorActive: 
colorSelecte 


'rgba(0,0,0,0.2)', 


'widget://res/city.json', 


己 


局 


屏 显示 的 数据 行 数 ， 超 上 





seeee 中 国 移动 全 17:11 全 了 ED 
经 个 人 设置 

个 头像 

只 昵称 

林 性 别 

9 城市 

大 个 性 签名 

号 积分 

思 建议 反馈 情 

山西 运城 夏 县 

图 5 一 5 











// 每 行 选 项 的 高 
// 普通 选项 的 字体 大 小 
14, 
By 


10，// 列 与 列 


xX 


// 选择 器 有 效 
// 选 项 的 





二 文字 颜 


'#£00°, 
a ?7#£f007 /7 








同 co 


// 遮 午 层 背景 ， 


// 已 选项 的 文字 颜 


的 数据 可 以 滑动 查看 ， 


// 数 据 源 的 数据 级 数 ， 最 多 3 级 ; 默认 : 3 
度 ; 默认 : 30 


; 默认 : 12 


api.require('UIActionSelector'); 


// 数据 对 象 或 保存 数据 对 象 的 文件 地 址 


只 能 是 奇数 ， 默 认 : 5 


// 当前 选项 的 字体 大 小 ; 默认 : 同 size 
// 行 与 行 之 间 的 距离 ， 默 认 : 5 
之 间 的 距离 ， 默 认 : 10 





点 击 该 

















区 域 隐藏 选择 器 ， 支 持 rgb,zgba,#, img ; 默认 : 


成 背景 ， 支 持 rgb,zgba,#,img ; 默认 : #fff 
色 ， 支 持 rgb,rgba,#; 默认 : #848484 
色 ， 支 持 rgpb,rgba,;#; 默认: 同 colorActive 
orActive 
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animation: true, // 弹出 和 隐藏 时 是 否 有 动画 效果 
cancel: { // 取消 按钮 设置 
text: ' 取 消 '， 





size: 12) 
w: 90, 
ht 


bg: "#£f£", 
bgActive: '#ccc', 
color: '#888', 
colorActive: '#fff" 
} 
ok: { // 确 定 按钮 设置 
text: ' 确 定 '， 


size: 127 
w: 90, 
Wt 


Dos 下 人 
bgActive: '#ccc', 
CUOlor: "#888"., 
colorActive: '#fff" 
站 
title: { // 标 题 设置 
text: ' 请 选择 '， 
Size: 12, 
h: 44, 
bg: '#eee', 
culor: "#888" 

































































































































































} 
fixedon: api.frameName // 模块 视图 添加 到 指定 frame 的 名 字 (只 指 frame， 传 window 无 效 ) 
}, 
function(ret, err) { 
//ret ={ 
// eventType: 'ok', // 字符 串 类 型 ， 交 互 事件 类 型 ， 取 值 范围 如 下 : 
// // ok( 表 示 用 户 点 击 了 确定 按钮 ) 
// // cancel( 表 示 用 户 取 消 了 选择 器 显示 ， 包 括 点 击 取消 按钮 和 遮 暑 层 ) 
// ”levell: ' 河 南 省 '， // 字符 串 类 型 ， 第 一 级 选项 的 内 容 ; 只 在 eventType 是 ok 时 有 效 
// ”level2: ' 驻马店 市 '， // 字符 串 类 型 ， 第 二 级 选项 的 内 容 只 在 eventType 是 ok 时 有 效 
// ”level3: ' 泌 阳 县 '， // 字符 串 类 型 ， 第 三 级 选项 的 内 容 ; 只 在 eventType 是 ok 时 有 效 
// selectedInfo: [ // JSON 对象， 选中 项 的 详细 信息 (open 时 传 入 的 信息 ) 
A { 
pa name:' 河南 省 '， 
// Eh: // 字符 串 类 型 ， 第 一 级 选项 的 内 容 ， 该 字段 为 用 户 定义 字段 
// itles rr, // 字符 串 类 型 ， 第 一 级 选项 的 内 容 ， 该 字段 为 用 户 定义 字段 
Pa 人 
天 } 
六 大 { 
ZX name : ' 驻马店 市 '， 
A 和 
a bh 
这 本 
A }, 
z 7 
// name:' 泌 阳 县 '， 
A E 


A titlesv sy 














5.5 使 用 UIActionSelector 











数据 源 的 格式 参照 如 下 代码 段 : 





[ //JSON 数组 类 型 ， 第 一 级 选择 项 数组 
























































































































































{ 
"name": "北京 市 "， // 字 符 串 类 型 ， 第 一 级 选择 项 的 名 称 
"sub": [ //JSON 数组 类 型 ， 第 二 级 选择 项 数组 
{ 
"name" : "东城 区 " // 字 符 串 类 型 ， 第 二 级 选择 项 的 名 称 
} 
{ 
"name" : "西城 区 "” // 字 符 串 类 型 ， 第 二 级 选择 项 的 名 称 
} 
] 
}, 
{ 
"name": "河南 省 "， // 字 符 串 类 型 ， 第 一 级 选择 项 的 名 称 
"sub": [ //JSON 数组 类 型 ， 第 二 级 选择 项 数组 
人 
"name": "郑州 市 "，// 字 符 串 类 型 ， 第 二 级 选择 项 的 名 称 
"sub": [ //JSON 数组 类 型 ， 第 三 级 选择 项 数组 
{ 
"name": "中 原 区 " // 字 符 串 类 型 ， 第 三 级 选择 项 的 名 称 
} 
{ 
"name" : "金水 区 " // 字 符 串 类 型 ， 第 三 级 选择 项 的 名 称 
} 
] 
}, 
{ 
"name": "驻马店 市 "， // 字 符 串 类 型 ， 第 二 级 选择 项 的 名 称 
"sub": [ //JSON 数组 类 型 ， 第 三 级 选择 项 数组 
{ 
"name": "西平 县 " // 字 符 串 类 型 ， 第 三 级 选择 项 的 名 称 
} 
{ 
"name": " 泌 阳 县 " // 字 符 串 类 型 ， 第 三 级 选择 项 的 名 称 
上 
] 
] 
} 








更 多 内 容 请 参阅 官方 文档 (UIActionSelector 部 分 )。 
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5.6 多 媒体 相关 模块 使 用 

















api 对 象 下 提供 了 























I 














操作 多 媒体 资源 的 基础 方法 ， 如 果 这 些 方法 不 能 满足 开发 需要 ， 在 


























Hl 


























APICloud 模块 Store 上 还 有 大 量 与 多 媒体 功能 相关 的 扩展 模块 可 供 使 用 ，api 对 象 下 的 多 媒体 相关 



























































方法 如 下 。 
。 图 片 
4 ”拍照 或 打 
4 
。 音频 
4 录音: api. 
4 
。 视频 








相册 : api.getPicture () 。 


保存 到 相册 : api.saveMediaToAlbunm () 。 


startRecord、 api.stopRecord, 


播放 : api.startPlay、api.stopPlay。 


9 播放 : api.openVideo。 











4 录像 或 打 





相册 : api.getPicture() 。 



























































他 模块 可 通过 在 文档 页 面 搜索 相关 功能 来 获取 更 多 信息 。 























5.7 使 用 扩展 模块 API， 实 现 App 所 需 功能 









































本 节 将 带领 读者 在 示例 App 中 使 用 扩展 模块 API。 











5.7.1 实现 商品 详情 页 轮 插图 









































“html/ware_frame.html” 


<div class="ware" 
</div> 


在 <script></sc 














F 面 实现 商品 详情 页 的 轮 播 图 功能 。 请 先 实现 商品 详情 页 的 静态 页 面 “html/ware.html” 和 




































































， 在 “html/main_frame.html” 商 上 品 列表 模板 中 添加 点 击 事 件 : 





tapmode onclick="fnOpenWare('{{= ware.id }}')"> 














ript> 标签 中 添加 函数 : 





function fnOpenWare (wareIQ_) { 


api.openWin({ 
name: 'ware', 


url: './ware.html', 


PageParam: { 


wareId:warelId_ 
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在 “html/ware.html” 打开 ware_frame 时 也 将 商品 ID 参数 传 入 到 {frame 中 。 这 样 就 可 以 



































二 























在 商品 详情 fame 中 使 用 api.pageParam.wareId 来 获取 当前 商品 ID 了 。 












































在 “html/ware_frame.html” 的 <script></script> 标签 里 插入 : 








apiready = function() { 
getWareInfo(api.pageParam.wareId); 
}; 


function getWareInfo (wareIQ_) { 

Var params = { 
fields: Fr 

where: 

id: wareId_ 

地 

和 

Timits 1 

include: ['wareInfoPointer'] 

} 


params = $api.jsonToStr (params); 





api.ajax( 
url: 'http://d.apicloud.com/mcm/api/ware?filter=' + params, 
method: 'get', 
headers: { 
"XxX-APICloud-AppId": "A6921544633372", 
"X-APICloud-AppKey": "2672b5911d8551540clea598e01lc87fee217ale5.1482500122476" 





} 
}, 
function(ret, err) { 
4 Creat} 1 
fnUpdateWareInfo (ret [0]); 
} else { 
alert (JSON.stringify (err)); 


function fnUpdateWareInfo(ware_ ) { 
// 这 里 更 新 界面 内 容 ， 请 自行 补充 












































































































































这 里 首先 通过 api .ajax() 获取 商品 信息 ， 然 后 执行 fnUpdateWareInfo() 来 显示 信息 。 
在 显示 轮 播 图 的 位 置 插入 占 位 元 素 : 























<div id="picture"></div> 








hl 
Wl 
证 
迷 
也 
过 
时 








下 面 主要 修改 apiready 
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Var UIScrollPicture; 

apiready = function() { 
Var picture = $api.byId("picture"); 
picture.style.width = api.winWidth + "px"; 
picture.style.height = api.winWidth + "px"; 


UIScrollPicture = api.require('UIScrollPicture'); 
UIScrollPicture.openl(t{ 
rect: { 
x: 0, 
y: 0， 
w: api.winWidth, 
h: api.winWwidth 
}, 
data: { 
paths: [ 
'widget://image/default_rect .png' 
] 
}, 
styles: { 
caption: { 
height: 35, 
Colors "#E0FFFF: 
size: 13, 
bgColor: '#696969', 
Position: "bottom' 
}v 
indicator: { 
alignm: center's 
Color: '#FFFFFF', 
activeColor: '#DA70D6' 
} 


}, 
PlaceholderImg: ‘'widget://image/default_rect.png', 


contentMode: 'scaleToFill', 
interval: 3, 
fixedOon: api.frameName, 
loop: true, 
fixed: false 

}, 

function(ret, err) { 

}); 


getWareInfo (api .pageParam.wareId); 
}; 

















这 里 初始 化 了 UIScrollPicture，<div idq="picture"></div> 是 
它 和 轮 播 图 模块 的 位 置 和 尺寸 相同 。 虽 然 初始 化 了 UIScrollPicture， 但 是 其 内 容 图 片 还 没有 










































































取 ， 只 显示 了 默认 图 片 。 
































看 修改 获取 商品 信息 的 fnUpdateWareInfo() 函数 : 

















function fnUpdateWareInfo (ware_) { 
// 这 里 更 新 界面 内 容 ， 请 自行 补充 





















































来 在 HTML 位 








的 ， 
































狄 











Var Paths = 
EE 去 


[] 7 
QF 生 总 海产 让 


var key "peture. 让 # 
if(ware_.wareInfo[key])t{ 


paths.push (ware_.wareInfo [key] .url); 


} 
UIScrollPicture.reloadDatal({ 
data: { 
paths:paths 
































这 里 根 














返回 的 数据 生成 医 








片 地 址 数组 ， 然 后 











新 显示 。 效 果 如 图 











5-6 所 示 。 




















S57 








扩 





使 展 模 块 API， 


= 

















商品 详情 


意大利 费列罗 T3 巧 克 力 


¥11.9 


YX 


优惠 活动 ， 必 汪 世 | 
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过 UIScrol1Picture 


实现 App 所 需 功 能 


.reloadData() 来 
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100 





























R 
un 
请 





扩 








展 模块 APL， 完 成 App 所 需 功能 实现 


5.7.2 使 用 UIImput 实 现 原生 输入 框 











打 





“html/login_frame.html”, 将 HTML 的 











户 名 输入 框 蔡 换 为 











[HH 
























































这 个 标签 的 位 置 就 是 之 后 放 



































Var username; 
function () 





apiready = 





下 主要 修改 apiready 


{ 





UIInput 的 位 置 ， 











mz 























的 id 是 “username”。 





Nl 








有 件 函数 的 内 容 : 


Var usernameInput = $api.byId("username"); 
$api.offset (usernameInput); 


Var usernameOffset = 


var UIInput = 
UIInput .open ({ 
rect : { 


api.require ("UIInput"); 


x: usernameOffset.1, 
y: usernameOffset.t, 
w: usernameOffset .w, 
h: usernameOffset.h 


}, 
styles: { 
bgColor: 
size: 16， 
color: "#0G0°", 
placeholder: { 
Solors ‘#ece! 


} 


由 


]v 
autoFocus: 
maxRows: 1, 
placeholder: 
keyboardType: 
fixedon: 
}, 
function(ret, err){ 
if(ret.eventType 


true, 

















和 
'default', 
api .frameName 


=== "change") { 


UIInput .value (zet .id function (ret){ 



































































































































































































































位 的 <div></div> 标签 ， 























username = ret .msg; 
}) 
} 
1); 

}; 

这 里 打开 UIInput 作为 用 户 名 输入 框 ， 在 回调 函数 中 通过 ret .id 获取 当前 UIInput 的 id， 
然后 诺 UIInput .value () 传 入 这 个 这 ;在 回调 函数 中 通过 ret .msg 获取 输入 框 内 容 ， 并 将 
内 容 保 存在 全 局 变量 usernam 。 在 发 送 登录 的 api.ajax() 中 使 用 username 作为 用 户 名 5 
段 的 数据 即 可 。 























密码 输入 框 按照 类 似 的 方法 创建 ， 在 使 





即 可 创建 密码 












































” 式 的 输入 框 。 效 果 如 








加 








5-7 所 示 。 





UIInput .open () 时 传 入 参数 inputType: "password" 
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AAA 
小 
B30 
局 
淹 
MH 
出 














5.7.3 ”实现 三 级 联动 的 城市 选择 如 





























我 们 来 看 如 何 实现 个 人 中 心里 地 址 列表 页 的 静态 页 面 “html/address.html” 和 “html/address_ 
frame.html”、 地 址 设置 页 的 静态 页 面 “html/setaddress.html” 和 “html/setaddress_frame.html”。 如 















































~、 












































读者 觉得 麻烦 ， 也 可 以 直接 在 新 的 页 面 中 实现 一 个 地 址 选择 器 。 
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加 





KE 下。 折 






































将 示例 项 “res/city.json” 文 件 复 制 到 项 res” 文 人 
frame.html ”， 为 “点 击 选 择 收 货 所 在 的 区 域 ” 部 分 注册 点 击 事件 : 









































<div class="option" tapmode onclick="fnOpenActionSelector();"> 
<div class="name"> 所 在 区 域 : </div> 
<div id="area" class="select"> 点 击 选 择 收 货 所 在 的 区 域 </div> 
<div class="arrow-right-highlight"></div> 

</div> 





























在 <script></script> 标签 中 插入 : 





function fnOpenActionSelector() { 
Var UIActionSelector = api.require('UIActionSelector'); 
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“html/setaddress 
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function (ret, 
E 














扩展 模块 API， 完 成 App 所 需 功 能 实现 


cy 
油 


UIActionSelector.open({ 
datas: 
layowmts 


'widget://res/city.json', 


EOW: Sy 
COL 3 
height: 30, 
12. 
sizeActive: 


size: 
14， 
rowSpacing: 5, 

colSspacing: 107 

maskBgs "rgbal0;DrO D2) 
ba: "#£FE", 

Color: '#888', 
colorActive: '#f£00', 
colorSelected: '#f£f00' 


}, 
animation: 
cancel: { 


truer 


' 取消 '， 
12, 


tewts 
size: 
wi S90 
hs 35 
bg: 人 
bgActive: '#ccc', 
Color: '#888', 
colorActive: '#fff" 


J 
ak: 


' 确 定 '， 
1 


teers 
size: 
Ww: 907 
hs 33; 
了 本 
bgActive: '#ccc', 
color: '#888', 
colorActive: '#fff" 


}, 
title: { 


' 请 选择 '， 
12; 


长 
size: 
h: 44, 
bg: '#eee', 

color: '#888"' 


]v 
fixedon: 


api.frameName 


err) { 

(ret && ret.eventType vok") 1 
$api.byId('area'); 

$api.html (area, ret.levell + ret.level2 


Var 已 工 = 











调 函 数 
所 示 。 
































了 一 个 UIActionSelector 模块 ， 使 























+ (ret.level3 ? ret.level3 


“res/cityjson” 文 件 初 始 化 选择 数 


Ts 
















































































， 如 户 点 击 “确定 ”按钮 则 将 选择 结 























行 了 




















接 并 显示 到 页 四 














上 。 效 果 如 图 
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i 一 
ET 
图 5-8 


5.7.4 实现 头像 上 传 


打 “html/personalcenter_frame.html”， 为 头像 区 域 注 册 点 击 事件 : 



































<div class="icon-panel" tapmode onclick="fnSelectAvatar()"> 
<div id="icon" class="icon"></div> 
</div> 

















在 <script></script> 标签 中 插入 : 





function fnSelectAvatar () { 
api.actionSheet ({ 
title: ' 选 择 头 像 '， 
cancelTitle: ' 取 消 '， 
buttons: [' 相 机 '，' 相 册 "] 
}, 
function(ret, err) { 
if (ret && ret.buttonIndex != 3) { 
Var sourceType = ret.buttonIndex == 1 ? 'camera' : ‘album'; 
api.getPicturel({ 
SourceType: sourceType, 
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mediaValue: 'pic', 
destinationType: 'url', 
allowEdit: true 

}, 


function(ret, err) { 


if (ret && ret.data != "") { 
fnUploadAvatar (ret .data); 
} else { 


alert (JSON.stringify (err)); 



















































































这 里 首先 用 api.actionSheet () 调用 动作 列表 ， 如 





5 旧 生 e 
点 击 的 是 第 


AN 凯 








J 





















































三 个 是 取消 )， 那 么 调用 api .getPicture() 来 选取 图 片 。 


将 其 传递 给 “fhUploadAvatar()”。 继 续 插入 : 























function fnUploadAvatar (url) { 
api.ajax({ 
url: 'https://d.apicloud.com/mcm/api/file', 
method: 'post', 
headers: { 
"X-APICloud-AppId": "A6921544633372", 








选取 后 图 片 的 本 



































"X-APIC1Loud-RApPKey": "2672b5911d8551540clea598e01lc87fee217ale5.1482500122476" 
} 
datas 二 
Values: { 
filename: 'icon' 
}, 
files: { 
file: url 


} v 
function(ret, err) { 
if (ret) { 
fnSetAvatar (ret); 
} else { 
alert (JSON.stringify (err)); 























这 里 将 选择 的 图 片 通过 api.ajax() 发 送 到 服务 器 。 继 续 操 





























function fnSetAvatar (avatar) { 
Var userInfo = $api.getStorage ("userInfo"); 
api.ajax({ 








Ln 


url: 'https://d.apicloud.com/mcm/api/user/' + userIinfo.userId, 


method: 'put', 
headers: { 
"Xx-APICloud-AppId": "A6921544633372", 





5.8 小结 105 
"Xx-APICloud-AppKey": 
"authorization": 


"2672b5911d8551540clea598e01c87fee217ale5.1482500122476", 
UserInfo .id 


Values: { 
avatar: { 
url: avatar.url 
} 
} 
}, 


function(ret, err) 


{ 
4 Fat} 寺 


fnShowAvatar (ret .avatar.url) 
} else { 


alert (JSON.stringify (err)); 
} 


}); 


二 


史 





























k 像 上 传 成 功 后 会 返回 一 个 服务 器 上 的 ul， 使 
字段 就 


是 userInfo.id。 继 续 插 入 : 























这 个 ur 可 以 更 新 



































~ > [4 . . 99 
户 信 息 。 authorization 


function fnShowAvatar (url) { 
$api.byId("icon") .style.background 
} 


i 0 ed 




























































































设置 用 户 信息 会 再 次 返回 头像 al， 这 次 将 它 显 示 出 来 即 可 。 
建议 在 显示 头像 时 利用 前 再 
































学 过 的 知识 对 它 进 行 缓存 。 








5.8 小结 


本 局 

















I 


兰 习 了 模块 的 




















本 概念 和 自 定义 模块 的 方法 ， 学 习 了 如 何 使 
和 UIActionSelector 模块 来 实现 特定 的 界面 和 功能 ， 学 习 了 如 何 实现 


















































UIScrollPicture、UIInput 
片上 传 的 功能 。 








加 
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第 6 章 


使 用 第 三 方 开放 服务 模块 ， 完 善 App 功能 和 
业务 多 和 辊 





主要 内 容 


前 面 的 章节 已 经 对 APICloud 端 引 擎 、API 对 象 和 模块 进行 了 介绍 。 在 APICloud 模块 Store 
中 还 有 大 量 由 第 三 方 开放 服务 平台 提供 的 模块 ， 如 推送 、 分 享 、 地 图 等 。 本 章 将 继续 学 习 这 些 
内 容 并 把 它们 使 用 到 示例 App 中 。 
学 习 目 标 

(1) 了 解 什么 是 第 三 方 服务 和 有 哪些 常用 的 第 三 方 服务 。 

(2) 了 解 和 编译 自 定 义 AppLoader。 

(3) 学 习 使 用 百度 地 图 、 微 信 分 享 和 登录 、 个 推 推送 和 支付 宝 支付 模块 。 
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6.1 集成 第 三 方 服务 


林 第 三 方 放 服 务 的 流程 如 图 6 1 所 示 。 



















































































对 于 已 经 由 他 人 (包括 个 人 或 服务 厂商 ) 发 布 的 APICloud 第 三 方 模块 ， 开 发 者 可 以 通过 
APICloud 控制 台 一 键 添加 进 自 己 的 项 ; 对 于 开发 者 自己 开发 的 自 定义 模块 ， 只 要 符合 
APICloud 模块 开发 规则 即 可 上 传 自 定义 模块 到 控制 台中 进行 集成 。 这 些 模 块 普遍 是 跨 平台 
的 ， 使 用 标准 的 JavaScript 接口 调用 ， 模 块 引入 后 按照 模块 的 API 文档 即 可 调用 模块 的 相关 
功能 。 



















































































































































































































































































Gs 
© @ 
文公 


1、 将 服务 封装 成 APICloud 模 块 2、 用 一 段 J5 代 码 跨 平台 调用 3、App 内 快速 完成 服务 焦 成 





6.2 目前 APICloud 已 经 集成 的 第 三 方 服务 模块 


APICloud 平 台 已 经 聚集 了 大 量 已 经 开发 好 的 第 三 方 服务 模块 ， 图 6-2 所 示 的 是 其 中 一 部 分 。 





































































































的 第 三 方 服务 模块 参阅 官方 网 页 (mod-sdk 部 分 )。 











GD 参阅 第 





网 
半 
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108 ”第 6 章 使 用 第 三 方 开放 服务 模块 ， 完 善 App 功能 和 业务 丈 辑 
支付 
音 视频 
《2 六 扫 生得 
推送 
Re 统计 
Wmge Gs 
验证 和 安全 
一 一 Cupuun 
fe 云 存储 
阿里 百川 
2 
Tertin 三 到 
IM CE 
更 多 
广告 
智能 识别 
图 6 一 2 
Wy 
6.3 上 自 定 义 AppLoader 
AppLoader 是 APICloud 为 方便 开发 者 在 移动 设备 调试 App 而 发 布 的 调试 器 ， 开 发 者 可 以 在 

移动 设备 上 实时 调试 自己 的 App 并 将 日 志 输 出 到 计算 机 上 的 开发 工具 中 。 这 相对 于 正式 版 App 
省 去 了 编译 环节 ， 极 大 地 简化 了 调试 过 程 。 


6.3.1 自 定 义 AppLoader 与 官方 AppLoader 的 区 别 
































































































































































































































































































































AppLoader 是 APICloud 项 目 在 移动 设备 上 的 调试 器 ， 在 前 面 章节 中 已 经 使 用 过 APICloud 
官方 AppLoader 来 调试 App。AppLoader (官方 或 自 定义 ) 本 身 是 一 个 App， 它 启动 完成 后 会 加 
载 指定 位 置 的 网 页 代码 运行 ， 在 进行 调试 的 时 候 APICloud 开发 工具 插件 会 将 测试 代码 同步 到 
这 个 指定 的 位 置 。 官 方 AppLoader 中 仅 集 成 了 最 基本 的 由 APICloud 官方 开发 的 模块 ， 想 要 调试 
第 三 方 服 务 模块 需要 在 自己 的 项 目 中 选中 要 调试 的 模块 ， 然 后 根据 选 定 的 模块 编译 生成 自 定 义 
























































AppLoader。 
































































































































































































































6.3 定义 AppLoader 
Wy 
6.3.2 为 什么 要 使 用 自 定义 AppLoader 

使 用 自 定义 AppLoader 基于 以 下 几 点 原 医 先 ，APICloud 有 众多 第 三 方 服务 模块 ， 如 曙 
全 部 包含 到 官方 AppLoader 中 会 造成 AppLoader 安装 包 过 大 。 

其 次 ，App 的 包 名 和 签名 证 书 等 是 在 编译 时 写 入 App 安装 包 中 的 ， 因 为 官方 AppLoader 是 
预先 编译 好 的 ， 所 以 官方 AppLoader 具有 相同 的 包 名 和 签名 证 书 等 信息 。 想 要 自 定义 这 些 信息 
需要 编译 自 定义 AppLoader， 这 些 信息 和 第 三 方 服务 的 使 用 密切 相关 。 

最 后 ，APICloud 模块 Store 中 某 些 第 三 方 服务 模块 之 间 存 在 编译 冲突 ， 不 能 同时 使 用 。 
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6.3.3 编译 生成 自 定义 AppLoader 



















































































































































































































































































































































































































































































定义 AppLoader 的 构成 如 图 6-3 所 示 。 

定义 AppLoader 的 编译 步骤 如 下 : 

(1) 进入 相关 项 目的 控制 台 页 面 ; 

(2) 点 击 左 侧 菜 单 中 的 模块 按钮 ， 再 点 击 右 侧 的 模块 库 标 签 ， 添 加 需要 使 用 的 模块 ， 

(3) 根据 需要 使 用 模块 的 文档 ,修改 应 用 的 配置 信息 ， 如 “config.xml” 文 件 中 的 模块 配 
信息 ; 

(4) 提交 修改 内 容 到 云端 ， 如 通过 svn 或 git 提交 ， 

(5) 点 击 左 侧 菜单 中 的 模块 按钮 ， 再 点 击 右 侧 的 自 定 义 loader 标签， 在 下 面 选择 
Android 或 iOS 平台 的 自 定义 AppLoader， 编 译 完 成 后 下 载 安装 。 



































应 用 已 添加 的 模块 
(| 官方 引擎 
一 一 一 一 一 一 一 一 


0000000000000 https//yabook.org 








人 

















0 















































定义 AppLoader 的 
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方式 和 








块 ， 完 善 App 功能 和 业务 逻辑 


言 方 AppLoader 相同 。 








6.4 第 三 方 服务 模块 使 用 流程 





入 与 























6.5 


一 些 App 会 涉及 地 至 
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方 服 务 模块 的 使 























| 第 三 方 





起 | 





放 服 务 3 





流程 如 下 : 











2 
号 














A 





I 





在 APICloud 应 








请 相关 ID 和 Key; 





和 config 文件 














配 


相关 ID 和 Key ; 
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的 包 和 名 
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代码 
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定义 Loader， 并 使 
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require 相关 模块 ， 并 调 

















百度 地 图 模块 的 接 入 和 使 用 
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定义 AppLoader 说 明 (官方 文档 Custom_Loader 部 分 ) 。 








时 二 





真 写 的 完了 




















。APICloud 提 作 
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等 ， 本 节 以 
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等 。 








~ 


的 


项 网 络 地 
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及 务 ， 复 画 








司 内 近 400 个 城市 、 
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先 在 APICloud 云 3 
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所 台 
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侧 的 模 





块 库 标签 ， 搜 索 “bMap” 模 块 
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DEs: 
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受 ] 


点 

















放 











通 相关 服务 。 


























二 加 号 进行 添加 
































点 击 左 侧 菜 





o 
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服务 需 






























































将 这 


U Android 


放 平 台 的 和 2 


和 
FF 全; 为 


























全 码 获 取 需 要 








Bb 么 必须 为 这 两 
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台 ， 这 意 
































个 apiKey 同时 配 
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E config 
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请 apiKey， 即 同 


如 
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个 > 


同时 支 所 


TH 



































个 应 





请 两 个 apiKey， 






































6 

Bai 胃 mm 开放 平台 首页 。 开发 > 解决 方案 
我 的 应 用 全 应 用 列表 
查看 应 用 
我 的 服务 
再 看 服务 应 用 蝙 号 。 应 用 名 称 访问 应 用 {AK ) 应 用 闫 | 
我 的 数据 6880840 bMapTest VvH2EQdZEB6CMK2FpNstCXpjZ ios 疯 
数据 管理 6875709 。 窒 方 demo ZdMpyat0Bpeq5SGPGUW45BLWs OS 篇 

图 6-4 

















点 击 “ 创 建 应 用 ”， 系 统 弹出 创建 AK (APICloud 了 



































称 ， 将 应 用 类 型 改 为 1OS 或 Android， 如 图 6-5 所 示 。 
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F 台 上 称 之 为 apiKey) 页 面 ， 输 




















入 应 用 名 

















公告 : 





| em 有 应 用 名 称 
ee 2 
我 的 服务 Android SDK 
ios SDK 回 云 检索 API @ Javascript AP 
查看 骤 务 浏览 器 放 @ Geocoding APIv2 @ ip 定位 AP 
我 的 数据 启用 服务 :大 族 攻 KAF 加 有 志 阳 API 加 全 好 组 态 反 API 
数据 管理 加 坐标 转换 AP1 加 度 眼 AP 回 全 烘 URL API 
加 吧 i 达 十 图 云 六 地 理 编码 AP1 
开发 者 信息 
我 要 认证 请 求 校 验方 式 ; “了 PP 白 名 单 校 验 
记录 中 心 
认证 资料 
IP 白 名 单 
反馈 
Bug 反 鲍 
只 有 1IP 白 名 单 内 的 设 务 器 才能 成 功 发 起 网 用 


格式 202.198.16.3,202.198.0.0/16 填写 IP 地 址 或 I 前缀 网 段 ,英文 半角 到 号 分 隔 
如 果 不 想 对 IP 做 任何 限制 ， 请 设置 为 00.0.0/0 


因 新 系统 升级 ， 自 公告 之 日 起 ， “服务 端 AK” 不 再 支持 浏览 名 妙 使 用 ; 在 浏览 器 端 使 用 ， 
请 选择 “浏览 昧 端 AK”， 例 如 javaScript API 只 支持 浏览 器 类 型 AK，。 

对 于 以 前 申请 的 服务 锁 AK ,不 变更 即 不 受 影响 ， 仍 支持 浏览 圳 端 使 用 ; 如 更 新 者 的 服务 
钢 AK ,再 次 保存 ， 则 按 新 创建 AK 处 至 ， 不 再 支持 浏览 融 揣 使 用 . 





6-5 





以 Android 为 例 ， 需 要 填 入 SHA1 码 和 包 名 ， 在 APICloud 云 平台 的 App 控制 台 




















这 些 信息 ， 如 图 6-6 所 示 。 





















































将 SHA1 码 和 包 名 填 入 “发 布 版 SHA1”“ 开 发 版 SHA1” 和 “ 包 和 名” 即 可 。 















































在 百度 地 图 开放 平台 提交 后 会 出 现 一 条 新 的 应 





















































记录 ， 其 








D000000000000 https//yabook.org 








“访问 应 用 (AK)” 











可 以 获取 


就 是 申请 
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到 的 Key，iOS 的 申请 过 程 类 似 。 
人 APICloud 三 一 HelloApiCloud 我 的 妹 户 文 类 在 声 柱 区 网 块 Store 名 所 协作 Bh pone 
ez 
i 加 HelloAPICloud 囊 = gs 
次。 wan onto 0 0 
p Es Ee 
a3E9CS3. 500603F 09413 40 ITATT2S 0 

tm 
和 办。 全 CR MO 
大 。 云 靖 丙 代 而 六 apclood 

comupieaappso171202 
> 二 
“eomporeopl 

= ~ 
7 APID 
Daabase EP 一 
as E33 EI 
+ 全 天 

图 6-6 


6.5.2 配置 ID 和 Key 
配 

















项 


* 





的 “config.xml” 文 从 

















<feature name="bMap"> 
<param name="android_api | 
<param name="ios_api_key" 
</feature> 








F， 添 加 如 下 代码 : 





key" value="H 
日 请 到 


请 到 的 Androiqd Key" /> 
的 i0Os Key" /> 





Value=" 日 























此 百度 地 


风 








的 引入 就 完成 了 























， 提 交代 码 并 生成 E 





定义 AppLoader 即 可 开始 调试 。 














6.5.3 百度 地 图 的 常用 API 





er 
Ti 























下 面 是 “bMap” 的 








API : 














// 初 始 化 百度 地 图 引擎 

Var map api.require('bMap') 

map .initMapSDK (function (ret) 
if (ret.status) { 


{ 


alert (' 地 图 初始 化 成 功 ， 可 以 从 百度 地 图 服务 器 检索 信息 了 ! '); 


} 
]) 7 











// 打开 百 度 地 图 
map.open({ 
rect: 





‘ 


XX: 


}, 


center: 


t 





lon: 
iats 
}, 


zoomLevel: 10,// 设 置 百 度 地 图 缩放 等 级 ， 


showUserLocation: true,// 是否 在 地 医 


116.4021310000,// 打 开 地 图 时 
39.9994480000// 打开 地 图 时 






































的 中 心经 度 
的 中 心 纬度 








区 值 范围 : 3 一 18 级 














上 显 











户 位 置 





示 




















fixedon: api .frameName, // 模块 视图 添加 到 指定 frame 的 名 


}， function(ret) { 
if (ret.status) { 
alert (' 地 图 打开 成 功 '); 











}); 

















// 根据 经 纬度 设置 百度 地 图 中 心 点 ， 此 接口 








map .setCenter ({ 

Goords: 1 
116.404,// 中 心经 
39.915// 中心 纬度 


To6n: 
lats 





}, 


业 



































animation: false// 是 否 使 
二 





// 获 取 百 度 地 图 中 心 点 坐标 
map.getCenter (function (ret) 
//ret = { 
ZA lon : 100， 中 心经 度 
// ”lat : 100 ”中 心 纬度 
PA 
]) 7 


























// 根 据 单个 关键 字 搜索 兴趣 点 ， 无 需 调 
map .SearchInCity ({ 





带动 画 效 果 





























open 接口 昌 








[可 搜索 



























































city: ' 北 京 ',// 要 搜索 的 城市 
keyword: ' 学 校 '，// 要 搜索 的 关键 
pageIndex: 0,// 分 页 索引 
pageCapacity: 20// 每 页 包含 的 条 数 
}, function(ret, err) { 
// ret = { 
AY status: true, 布尔 型 ; true| |false 
// totalNum: 10, 数字 类 型 ， 本 次 搜索 的 总 结果 数 
ja currentNum: 5, 数字 类 型 ， 当 前 页 的 结果 数 
// totalPage: 10, 数字 类 型 ， 本 次 搜索 的 总 页 数 
// pageIndex: 1, 数字 类 型 ， 当 前 页 的 索引 
// results: [{ 数组 类 型 ， 返回 搜索 结果 列表 
XU Lons T16213, 数字 类 型 ， 当 前 内 容 的 经 度 
A lat: 39.213, 数字 类 型 ， 当 前 内 容 的 纬度 
A name: '', 字符 串 类 型 ， 名 称 
// uid: 123 数字 类 型 ， 兴 趣 点 的 id 
47 address; '', 字符 串 类 型 ， 地 址 
4 GLEtYy Ti 字符 串 类 型 ， 所 在 城市 
2 phone: '', 字符 串 类 型 ， 电 话 号 码 
// poiType: 0 数字 类 型 ; PoI 类 型 
刀 取 值 类 型 : 
A 0( 普 通 点 ) 
天光 1( 公 交 站 ) 
// 2( 公 交 线 路 ) 
// 3( 地 铁 站 ) 
// 4( 地 铁 线 路 ) 
2 }] 






































6.5 ”百度 地 图 模块 的 接 入 和 使 
字 (只 指 frame， 传 window 无 效 ) 
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于 





114 有 6 使 





放 服 务 模块 ， 























// 
}); 








更 多 “bMap” 模 块 的 使 


完善 App 功能 和 业务 逻辑 





























方法 请 参阅 官方 文档 【Open-SDK 部 分 )。 








6.6 ”人 微 信 分 郭 与 登录 的 接 和 信和 使 用 






































为 简化 


> 日 
户 登 录 、 提 高 页 

















信 的 分 享 和 登录 模块 为 例 ，t 





-IT 











曝光 数 ， 许 多 App 都 具 























和 三方 登 录 和 分 享 的 功能 。 这 


























6.6.1 申请 ID 和 Key 


解 这 些 功能 的 使 用 方法 。 














了 


















































使 用 微 信 的 








相 





关 模 块 同样 需要 去 微 信 的 

















发 者 平台 进行 


















































加 























提 到 的 百度 地 




















四 的 











6.6.2 ”配置 DD 和 Key 























在 项 





请 流程 ， 更 多 信息 请 参 



































如 下 代码 : 





的 “config.xml” 文 件 中 配 


<feature name="wx"> 


<param name="urlScheme" value=" 微 信 了 

















EF 台 申 请 获得 appid"/> 











放 








<param name="apiKey" value=" 微 信 开 放 平 台 申请 获得 appid"/> 


<param name="apiSecret" value=" 微 信 升 


</feature> 

















提交 代码 


胚 1 

















译 自 定义 AppLoad 











口 
放 平台 申请 获得 的 secret"/> 

















er 后 可 以 











始 测试 应 用 。 








6.6.3 微 信 分 享 模块 的 常用 API 








下 面 是 “wx” 模 块 的 常见 使 用 方法 : 









































Var wx = api.require('wx'); 





// 判 断 是 否 安装 了 微 信 客户 端 
wx.isInstalled(function (ret，，err) { 
if (ret.installed) { 











// 已 安装 
} 
}); 
// 授 权 登 录 
wx.auth(t{ 
apiKey: ''// 从 微 信 开放 平台 获取 




















//apiKey， 则 无 法 打 


}, function(ret, err) { 


//ret = 


A status:true, 


{ 





微 信 进行 登录 


是 否 成 功 














里 以 微 





请 和 认证 ， 操 作 方 法 类 似 6.5 市 
阅 APICloud 整理 的 官方 文档 (weChat 部 分 )。 


的 appidq， 若 不 传 则 从 当前 wigget 的 config .xml 中 读 取 ， 不 传 或 传 入 错误 的 
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pk code:"" getToken 接 口 需 传 入 此 值 ， 用 于 换取 accessToken 
7 






































//err = { code:0 } 错误 码 -1( 未 知 错误 )0( 成 功 ， 用 户 同 意 ) 1 (用 户 取 消 ) ”2 (用 户 拒 绝 授 权 ) 3 ( 当 
// 前 设备 未 安装 微 信 客 户 端 ) 
}); 








// 获取 授权 accessToken( 需 要 登录 授权 成 功 ) 

wx.getToken({ 
apiKey: '',// 从 微 信 开放 平台 获取 的 appid， 若 不 传 则 从 当前 wiqget 的 config. xml 中 读 取 
apiSecret: '',// 从 微 信 开 放 平 台 获 取 的 secret， 若 不 传 则 从 当前 wiqdget 的 config .xml 中 读 取 
code: "12346857684"//auth () 方法 获得 的 code 

}, function(ret, err) { 




















































































































// ret = { 

// status: true, 布尔 型 ; true | |false 

// accessToken: '', 字符 串 类 型 ， 接 口 调用 凭证 ， 传 给 getUserInfo 接 口 获取 用 户 信息 有效 期 2 小 时 
// dynamicToken: ''， 字 符 串 类 型 ， 当 accessToken 过 期 时 把 该 值 传 给 refreshToken 接 口 ， 刷 新 
//accessToken 的 有 效 期 .dynamicToken 的 有 效 期 为 30 天 

// expires: 7200, 数字 类 型 accessToken 有 效 期 单位 ( 秒 ) 

Pd openId: '!' 字符 串 类 型 ， 授 权 用 户 唯一 标识 

下 } 


}); 

















// 获取 用 户 信息 〈( 需 要 获取 accessToken 成 功 ) 
wx.getUserIinfol({ 
accessToken: '',//getToken 接 口 或 refreshToken 接 口 成 功 获取 的 accessToken 值 






























































































































































openId: ''//getToken 接 口 或 refreshToken 接 口 成 功 获 取 的 openId 值 
}, function(ret, err) { 
//ret = { 
// status: true, 布尔 型 ; true | |false 
// openid: 1', 字符 串 类 型 ， 普 通用 户 的 标识 ， 对 当前 开发 者 账号 唯 
poh nickname: '', 字符 串 类 型 ， 普 通用 户 昵 称 
// sex: 1, 数字 类 型 ， 普 通用 户 性 别 ,1 为 男性 , 2 为 女性 
// headimgurl: '', 字符 串 类 型 ， 用 户头 像 ， 最 后 一 个 数值 代表 正方 形 头像 大 小 (有 0、46、64、96、 
//132 数 值 可 选 ,0 代表 640*640 正方 形 头 像 )， 用 户 没有 头像 时 该 项 为 空 
7 privilege: [], 数组 类 型 ， 用 户 特权 信息 ， 如 微 信 沃 卡 用 户 为 (chinaunicom) 
2 unionid: '! 字符 串 类 型 ， 用 户 统一 标识 。 针 对 一 个 微 信 开 放 平 台 账 号 下 的 应 用 ， 同 一 用 户 的 
//unionid 是 唯一 的 
友人 


1); 



































1 时 ， 代 表 accessToken 过期， 调用 此 接口 刷新 accessToken 





五 








// 调 用 getUserInfo 接口 错误 码 返 
wx.refreshToken({ 




















































































































apiKey: '',// 从 微 信 开放 平台 获取 的 appidq， 若 不 传 则 从 当前 wiqget 的 config.xml 中 读 取 
dynamicToken: ''//getToken 接 口 或 refreshToken 接 口 获取 的 dynamicToken 值 
}, function(ret, err) { 
//ret = { 
// status: true, 布尔 型 ; true| |false 
// accessToken: '', 字符 串 类 型 ， 接 口 调用 凭证 ， 传 给 getUserInfo 接 口 获取 用 户 信息 ， 有 效 期 2 小 时 
AY dynamicToken: '',， 字 符 串 类 型 ， 当 accessToken 过 期 时 把 该 值 传 给 refreshToken 接 口 ， 刷 新 
//accessToken 的 有 效 期 .dqynamicToken 的 有 效 期 为 30 天 
A expires: 7200, 数字 类 型 ; accessToken 有效 期 ， 单 位 〈 秒 ) 
// openId: '! 字符 串 类 型 ， 授权 用 户 唯一 标识 
yp: 
1); 
// 分 享 文本 内 容 


wx.shareText ({ 
apiKey: '',// 从 微 信 开放 平台 获取 的 appid， 若 不 传 则 从 当前 widget 的 config.xml 中 读 取 
scene: 'timeline'v// 场 景 仅 可 取 timeline( 朋 友 圈 ) 
text : ' 我 分 享 的 文本 '// 分 享 的 文本 
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于 

















6 使 用 第 三 方 开放 服务 模块 ， 完 善 App 功能 和 业务 逻辑 











}, function(ret, err) { 
//ret = {status:true} 
1); 


// 分 享 图 片 
wx.shareImage ({ 
apiKey: '',// 从 微 信 开放 平台 获取 的 appid， 若 不 传 则 从 当前 wiqget 的 config .xml 中 读 取 
scene: 'session',// 场 景 可 取 session( 会 话 )timeline( 朋 友 圈 )favorite( 收 藏 》 
thumb: 'widget://a.jpg',// 缩 略图 片 的 地 址 ， 支 持 fs://、widget:// 协议 。 大 小 不 能 超过 32KB， 
// 若 contentUrl 为 本 地 图 片 地 址 则 本 参数 忽略 ， 需 要 路 径 包 含 图 片 格式 后 缀 ， 否 则 ， 如 果 原 图 片 为 非 png 格 式 ， 会 分 享 失败 
contentUrl: 'widget://b.jpg'// 分 享 图片 的 url 地 址 (支持 fs://、widget:// 和 网 络 路 径 )， 长 度 不 能 
// 过 10KB， 在 Android 平 台 上 若 为 网 络 图 片 时 仅 当 scene 为 session 时 有 效 ,i0S 平 台 上 不 支持 网 络 图 片 地 址 ， 若 为 本 
// 地 图 片 大 小 不 能 超过 10MB 
}, function(ret, err) { 
//ret = { status:true } 

























































































}); 


// 分 享 网 络 音频 资源 
wxX.ShareMusic({ 
apiKey: '',// 从 微 信 开放 平台 获取 的 appidq， 若 不 传 则 从 当前 widget 的 config. xml 中 读 取 
scene: 'timeline',// 场 景 可 取 session( 会 话 )timeline( 朋 友 圈 )favorite( 收 藏 ) 
title: ' 测试 标题 ',// 分 享 网 络 音频 的 标题 
description: ' 分 享 内 容 的 描述 ',// 分 享 网 络 音频 的 描述 
thumb: "widget://a.jpg'vy// 分 享 网 络 音频 的 缩 略 图 地 址 ， 要 求 本 地 路 径 〈fs:// widget://) 大 小 不 能 
// 过 32KB, 需要 路 径 包 含 图片 格 式 后 级 ， 否 则 ， 如 果 原 图 片 为 非 png 格 式 ， 会 分 享 失败 
contentUrl: 'http://docs.apicloud.com/test/m.mp3'// 分 享 网 络 音频 的 url 地 址 ， 长 度 不 能 超过 10KB 
}, function(ret, err) { 
//ret = { status:true } 















































]) 7 


// 分享 网 络 视频 资源 

wX.ShareVideo({ 
apiKey: '',// 从 微 信 开 放 平 台 获 取 的 appid， 若 不 传 则 从 当前 widget 的 config.xml 中 读 取 
scene: 'timeline',// 场 景 可取 session( 会 话 )timeline( 朋 友 圈 )favorite( 收 藏 ) 
title: ' 测 试 标题 ',// 分 享 网 络 视频 的 标题 
description: ' 分 享 内 容 的 描述 ',// 分 享 网 络 视 频 的 描述 。 由 于 微 信 平台 限制 ， 对 不 同 平台 部 分 场景 本 参数 无 效 
thumb: 'widget://a.jpg',// 分 享 网 络 视频 的 缩 略图 地 址 ， 要 求 本 地 路 径 (fs://、widget://) 大 小 不 能 

// 过 32KB, 需要 路 径 包 含 图 片 格式 后 经， 否则， 如果 原 图 片 为 非 png 格 式 ， 会 分 享 失败 
contentUrl: 'http://resource.apicloud.com/video/apicloud.mp4'// 分 享 网 络 视 频 的 url 地 址 ， 

/ /长度 不 能 超过 10KB 

}, function(ret, err) { 
//ret = { status:true} 
































}); 


// 分 享 网 页 

wx.shareWebpage ({ 
apiKey: '',// 从 微 信 开放 平台 获取 的 appid， 若 不 传 则 从 当前 widget 的 config. xml 中 读 取 
scene: 'timeline',// 场 景 可 取 session( 会 话 )timeline( 朋 友 圈 )favorite( 收 藏 
title: ' 测 试 标题 ',// 分 享 网 页 的 标题 
description: ' 分 享 内 容 的 描述 ',// 分 享 网 页 的 描述 。 由 于 微 信 平台 限制 ， 对 不 同 平台 部 分 场景 本 参数 无 效 
thumb: 'widget://a.jpg',// 分 享 网 页 的 缩 略 图 地 址 ， 要 求 本 地 路 径 〈fs://、wiqget://) 大 小 不 能 超过 

//32KB, 需要 路 径 包 含 图 片 格式 后 级 ， 否 则 ， 如 果 原 图 片 为 非 png 格 式 ， 会 分 享 失败 
contentUrl: 'http://apicloud.com'// 分 享 网 页 的 url 地 址 ， 长 度 不 能 超过 10KB 

}, function(ret, err) { 
//ret = { status:true } 







































































]) 7 




















关于 “wx” 模 块 的 更 多 信息 可 参阅 官方 文档 。 
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6.7 个 推 推送 的 接 入 和 使 用 


为 将 消息 即时 送 达 用 户 ， 许 多 App 都 具有 消息 推送 功能 ， 本 节 以 个 推 推送 模块 为 例 介 绍 推 
送 模块 的 申请 和 使 用 方法 。 
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6.7.1 申请 ID 和 Key 


这 里 以 个 推 为 例 ， 需 要 开发 者 申请 个 推 开 发 者 账户 并 完成 服务 的 申请 。 可 根据 官方 指导 文 
档 (pushGeTui_manual 部 分 ) 了 推 的 开发 心 完成 相关 操作 。 

































































































































































6.7.2 配置 ID 和 Key 


在 “config.xml” 文 件 中 进行 配置 ，“android_groupid” 字 段 留 空 即 可 ， 代 码 如 下 : 


















































<feature name="pushGeTui"> 
<param name="ios_appkey"” value=" 通 过 开发 者 中 心 获取 " /> 
<param name="ios_appid" value=" 通 过 开发 者 中 心 获 取 " /> 
<param name="ios_appsecret" value=" 通 过 开发 者 中 心 获取 " /> 
<param name="android_appkey"” value=" 通 过 开发 者 中 心 获取 " /> 
<param name="androiqd_appid" value=" 通 过 开发 者 中 心 获 取 " /> 
<param name="android_appsecret" value=" 通 过 开发 者 中 心 获取 " /> 
<param name="android_ groupid" value="" /> 

</feature> 
























































6.7.3 个 推 模块 的 常用 方法 


玉 面 是 个 推 模块 的 常见 使 用 方法 : 























HT 



































Var uzgetuisdk = api.require('pushGeTui'); 
// 初始 化 推送 服务 


uzgetuisdk.initialize (function(ret) { 




















//ret = { 

// result:1, 操作 成 功 状态 值 
// type: "cid", CID 类 型 

// cid:"sdwe435236fdfqd" 返回 的 ciad 的 值 
A 

//ret = { 

// result:1, 操作 成 功 状态 值 
27 type:"payload", payload 类 型 
// taskId:"taskId", taskId 值 

/JY messageId:"messageId", messageId 值 
4 payload: "payload", payload 内 容 
jf offLine:"true" 判断 推送 时 App 是 杀 死 还 是 启动 状态 
La 

//ret = { 
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于 
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Pa result :1, 操作 成 功 状态 值 
Ly type:"apns", apns 类 型 
2 msg:"msg" apns 消息 体 
A 
//ret = { 
// code:"errorCode", 错误 码 
A description:"error description", 错误 描述 
A type:"occurError" occurError 类 型 
大 好 

]) 7 

// 注 册 deviceToken 


uzgetuisdk.registerDeviceToken({ 
deviceToken: api.deviceToken, 

}, function(ret, err) { 

//ret = { result:1 } 1 成 功 0 失败 
bY 








//App 处 于 未 启动 状态 时 ， 点 击 通知 打开 程序 获取 消息 

uzgetuisdk.payloadMessage (function (zet) { 
api.alert (ret .payload); 

1); 


























关于 “pushGeTui” 模 块 的 更 多 信息 请 参阅 官方 文档 。 











6.8 支付 执 支 付 模块 的 接 人 和 使 用 


支付 宝 、 微 信 文 付 等 支付 服务 极 大 地 改变 了 人 们 的 日 常 支付 方式 ， 已 经 成 为 现代 生活 的 重 
要 组 成 部 分 。APICloud 提供 了 接 入 这 些 服务 的 模块 ， 本 节 以 支付 宝 模 块 为 例 ， 讲 解 支 付 模块 在 
App 开发 过 程 中 的 使 用 。 
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6.8.1 申请 应 用 ID 和 Key 

“aliPayPlus” 模 块 是 “aliPay” 模 块 的 升级 版 ， 主 要 区 别 是 更 新 了 支付 宝 移 动 端 支 付 开放 
SDK。 新 申请 支付 宝 账号 的 开发 者 ， 应 当 使 用 本 模块 。“aliPay” 模 块 仅 支 持 老 版 支付 宝 账号 。 新 
版 支付 宝 账号 支付 功能 的 开通 ， 请 参考 支付 宝 官方 文档 App 支付 快速 接 入 指南 。 











EE 









































































































































6.8.2 配置 应 用 ID 和 Key 
在 “config xml” 文 件 中 做 如 下 修改 ; 























<feature name="aliPpayPlus"> 
<param name="urlScheme" value="AliPayPlusA000000011" /> 
</feature> 
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其 “urlScheme” 字 段 1 











字符 串 “AliPayPlus” 和 本 应 用 的 widgetId 拼接 而 成 。 














IT 














6.8.3 支付宝 模 块 的 常用 API 
付 宝 模块 的 常见 使 用 方法 如 下 ， 


// 支 付 


var aliPayPlus = api.require('aliPayPlus'); 






































aliPayPlus.payOrder ({ 
orderIinfo: 'app id=2015052600090779gbiz content=%$7B%S22timeout express%$22%$3A%2230ms%® 
22%2C%22seller_ id%22%3A%22%22%2C%22product_code%®%22%3A%22QUICK_MSECURITY_PAY%22%$2C%22total_ 
amount%22%3A%$220.01%22%2C%22subject%22%3A%221%22%2C%22body%22%3A%22%E6%88%91%E6%98%AFSE6S 
B5%8BSE8%SAFS95%E6%95%BOSE6S8D%SAES22%2C%$22o0ut trade no®%22%3A%22I1QJZSRC1YMQOB5HU%22%7D&chars 
et=utf-8&format=jsongmethod=alipay.trade.app.pay&notify_url=http%3A%2F%2Fdomain.merchant. 
com%2Fpayment_notifyg&sign type=RSA2&timestamp=2016-08-25%2020%3A26%3A3l&version=1.0&sign=cYmuU 
nKi5QdBsoZEAPMXVMmRWj suUj%2By48A2DvWAVVBuYkiBj13CFDHUu2VvVZQvmOfkjEOYqCUQEO04kqm9Xg3tIX8tPeIGIFtsI 
yP%$2FM45w1ZsDOiduBbduGfRolXRsvAyVAv2hCrBLLrDIS5Vi7uZZ77LO5JOPPUUWWwYyQGtOM4cj8g%3D" 
}, function(ret, err) { 
//ret = { code:0 } 
// 字 符 串 类 型 ， 错 误 码 ， 取 值 范 围 如 下 : 
//9000 : 支付 成 功 
//8000 : 正在 处 理 中 ,支付 结果 未 知 (有 可 能 已 经 支付 成 功 )， 请 查询 商户 订单 列表 中 订单 的 支付 状态 
//4000 : 订单 支付 失败 
//5000 : 重复 请 求 
//6001 : 用 户 中 途 取消 支付 操作 
//6002 : 网 络 连接 出 错 
//6004 : 支付 结果 未 知 ( 有 可 能 已 经 支付 成 功 )， 请 查询 商户 订单 列表 中 订单 的 支付 状态 












































































































































其 中 orderInfo 字段 由 业务 服务 器 根据 支付 宝 官 方 文档 生成 。 关 于 “aliPayPlus” 的 更 多 信息 
请 参阅 APICloud 官方 文档 (aliPayPlus 部 分 ) 。 






































6.9 使 用 第 三 方 开放 服务 模块 ， 完 善 App 功能 和 业务 逻辑 


本 节 将 带领 读者 为 App 示例 项 目 添 加 第 三 方 服务 模 世 




















7 
o 











6.9.1 获取 当前 城市 


先 请 参照 6.5 节 的 内 容 ， 在 APICloud 控制 台 示 例 项 添加 “bMap” 模 块 、 在 百度 地 图 
放 平 台 上 请 开发 者 权限 ， 人 然后 修改 “config.xml” 并 编译 自 定义 AppLoader。 












































































































































IT 









































在 编译 自 定义 AppLoader 之 前 ， 前 面 使 用 过 的 APICloud 官方 模块 也 需要 进行 单独 添加 ， 例 
如 “UIInput” “UIScrollPicture” 和 “UIActionSelector”。 
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让 
于 









































打 


bMap 
bMa 


accuracy: 


放 服 务 模块 ， 完 善 App 功能 和 业务 逻辑 








“html/main.html” ,对 “apiready” 








il 
ul 
个 





api.require('bMap'); 
p.getLocation({ 


'1000m', 


autoStop: true, 


filter: 


} 
和 


} 
]) 7 


function(ret, 


100000 


err) { 


{ 


(ret .status) 


fnGetCityNameFromLocation (ret); 
} else {1 


alert (err.code); 


bMap.getNameFromCoords ({ 


lom: 


function fnGetCityNameFromLocation(location )f{ 














location -Lony 
Lats 


location, .lat 
}, function(ret, err) { 
if (ret.status) { 
$api.setStorage('currentCity',ret.city); 
alert (ret .city); 
} 
); 
} 
这 六 






































getNameFromCoords () 返 





并 


上 通 过 bMap .getLocation() 获取 妆 


本 华 标 所 在 的 城 


























前 所 在 地 的 和 


F 画 数 做 如 下 修改 : 











H 。 效果 如 所 6 一 7 所 示 。 

















E 标 ， 





AS 


然后 通过 bMap. 
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之 后 通过 $api.html ($api.byId('city')) 可 将 返回 的 城市 显示 到 指定 位 置 。 
人 
6.9.2 根据 输入 内 容 检索 地 址 列表 
下 面 实现 根据 输入 的 内 容 显示 地 址 列表 。 首 先 要 实现 详细 地 址 输入 页 面 的 静态 页 面 “html/ 
setaddressdetail.html” 和 “html/setaddressdetail_frame.html”。 
打 “html/setaddressdetail_ frame.html” 页 面 ， 在 <body></body> 标签 中 插入 如 下 内 容 : 











<script type="text/template" id="template"> 


{{~it.results:value}} 
<div class="option" tapmode onclick="fnSelectAd 
<div class="icon"></div> 
<*div class="info"> 
<div class="top">{{=value.name}}</div> 


<div class="bottom">{{=value.address}}< 
</div> 
</div> 
{A 
</sceript> 








这 是 定义 显示 检索 到 的 地 址 列表 的 doT 模板 。 随 后 


apiready 


}; 


fun 


{ 


function() 
fnTnitUrinput ts 


ction fnIinitUIrtneutty + 

var searchText $api.byId('searchText'); 
$api.offset (searchText); 
api.require('UIInput'); 


var rect 
var UIInput 
UIInput .open ({ 
rect : { 

rect. 
rect. 
rect. 
rect. 


TK x 


}, 

styles: { 
bagCcolor: 

14， 


'#eee', 
size: 
color: '#000', 
placeholder: { 
ulors "4000" 
}, 
autoFocus: 
maxRows: 1, 
placeholder: ' 请 输入 地 址 '， 
keyboardType: 'default', 
fixedOon: api.frameName 
function(ret, err) { 
if (ret) { 


false, 


} 


dress('{{=value.address}}')"> 


div> 


对 <script></script> 标签 做 如 下 
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var UiInputIQ = ret.id; 
if (ret && ret.eventType == "change") { 
UIInput.value({ 
1a uilinputIid 
}， function(ret, err) { 
if (ret) { 
if (ret.status) { 
//console.log(ret .msg); 
fnSearchInCity (ret .msg); 
} 
} else { 
alert (JSON.stringify (err)); 


1 
} 
} else { 
alert (JSON.stringify (err)); 


]) 7 


function fnSearchInCity (msg_) { 
Var currentCity = $api.getStorage('currentCity'); 
Var bMap = api.require('bMap'); 
bpMap .searchInCity ({ 
city: currentcCity, 
keyword: msg_, 
pageIndex: 0, 
pageCapacity: 20 
}s function(rety + 
if (ret.status) { 
fnUpdateSearchList (ret); 


1); 


function fnUpdateSearchList (data_ ) { 
Var template = $api.byId('template'); 
war liet = Sapi.byId('list')y 
var tempFn = doT.template (template.innerHTML); 
Var html = tempFn (data_ ); 
$api.html (list, html); 


function fnSelectAddress (address_) { 
api.execScript ({ 
name: 'setaddress', 
frameName: 'setaddress_frame', 
script: 'setAddressDetail(\'' + address_ + IN 
}); 
api.closeWin () ; 





























这 里 首先 创建 了 一 个 输入 框 ， 在 输入 变化 时 执行 fnSearchInCity() 国 数 。 在 fnsSearchInCity () 
函数 内 首先 引入 了 “bMap” 模 块 ， 调 用 了 bMap.searchInCity() 方法 来 检索 当前 城市 内 的 关键 


字 地 点 。 最 后 将 返回 的 结果 通过 doT 模板 实时 显示 到 页 面 上 。 效 果 如 图 6-8 所 示 。 
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6.9 











放 服 务 模 块 ， 





使 





完善 App 功能 和 业务 逻辑 





1 路 (四 惠 枢 纽 站 - 老 山 公交 场 站 ) 


1 路 ( 老 山 公交 场 站 -四 惠 枢纽 站 ) 


] 铺 油坊 理想 城 


博 兴 一 路 中 路 


运通 202 贱 


阳光 一 路 


北京 市 西城 区 社民 需 四 1 号 


一 路 光明 汽 外 


基 京 市 石 季 山区 古城 唐军 76 邱 


东 河沿 路 /长 顺 一 路 (路 口 ) 


机 市 相 台 区 长 期 一 牙 


北京 市 西城 区 阳光 一 路 培训 学 校 











6 一 8 


6.9.3 使 用 个 推进 行销 息 推送 










































































































































































先 参照 6.7 节 的 内 容 ， 在 APICloud 控制 台 示 例 项 
发 者 平台 上 面 为 示例 项 目 创建 应 请 ID 和 Key， 并 配 
AppLoader。 
+ “html/main.html”， 对 “apiready” 事 件 函 数 做 如 下 修改 : 

















var pushGeTui = api.require("pushGeTui"); 
pushGeTui .initialize (function(ret) { 
Var Value = ""}; 
switch (ret.type) { 
case 'cid': 
value = "cid:' + ret.cid; 
break; 
case "payload ' : 


value = "Payload:' + ret.payload; 
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到 “config.xml” 


123 





添加 “pushGeTui” 模 块 ， 在 个 推 








ws 






































， 编 译 











定义 
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break; 

Case 'occurError': 
Value = ‘'occurError'; 
break; 


console.log(value); 
































这 里 初始 化 了 个 推 模块 ， 不 需要 任何 参数 。 























工具 的 log 输出 “cid:xeeeee” 说 明 初 始 化 完成 。 之 后 ， 在 个 推 的 控 
创建 的 应 用 ， 然 后 点 击 “ 创 建 推送 *， 输 入 推送 的 































































































3% EL 









































“个 推 =- 消息 推送 ”， 选 择 刚刚 
内 容 即 可 完成 推送 。 效 果 如 图 6-9 所 示 。 
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HelloAPICloud 





6.10 小 结 

















二 











放 服 务 和 自 定义 AppLoader 以 及 它们 的 使 用 方法 。 
































第 三 方 
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员 
社 
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第 7 章 


使 用 APICloud 应 用 管理 服务 ， 实 现 App 发 
布 和 运营 











主要 内 容 

前 面 的 章节 已 经 讲解 了 很 多 App 的 开发 技术 。 本 章 将 会 针对 App 的 编译 、 版 本 管理 和 闪 愤 
广告 等 与 发 布 运营 相关 的 功能 进行 讲解 。 
学 习 目 标 

(1) 学 习 如 何 使 用 APICloud 云 平 台 对 App 项 目 进 行 云 编译 及 操作 常用 的 配置 项 。 

(2) 学 习 在 APICloud 云 平 台 上 进行 版 本 管理 的 方法 。 

(3) 学 习 如 何 定制 闪 屏 广告 功能 。 

(4) 了 解 APICoud 项 目 开发 的 优化 策略 和 编码 规范 。 

(5) 学 习 多 Widget 和 SuperWebView 的 使 用 。 
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7.1 编译 生成 App 安 


管理 服务 ， 


装 


包 


实现 App 发 布 和 运营 












































































































































































































































































































































































































































































































































在 App 开发 完成 后 ， 需 要 对 其 进行 编译 以 生成 正式 版 才 可 以 交付 用 户 。 在 编译 时 也 会 涉及 
加 密 与 权限 设置 等 问题 ， 本 市 将 对 这 些 内 容 加 以 介绍 。 
7.1.1 云 编 译 
在 开发 完成 后 首先 要 对 App 进行 编译 。 编 译 的 过 程 是 在 APICloud 云端 完成 的 ， 发 者 只 
需要 根据 需求 选择 对 应 的 编译 特性 ， 就 可 以 完成 多 平台 的 App 编译 。 在 编译 之 前 可 以 对 代码 进 
行 压缩 和 加 密 ， 也 可 以 对 编译 后 的 App 进行 加 固 并 进行 云 测 试 ， 如 图 7-1 所 示 。 
图 7-1 
编译 过 程 是 在 APICloud 云 控 制 台中 App 的 云 编译 页 面 进行 。 在 云 编译 页 面 可 以 进行 多 项 设置 ， 
包括 编译 平台 、 权 限 、 代 码 压缩 (在 右上 角 的 高 级 设置 中 ) 、 代 码 加 密 和 加 固 等 ， 如 图 7-2 所 示 。 
调 恰 置 
全 也 
二 清汤 
未 各 贸 全 
去 设 村 5 
a 
API 渗 涝 
云 倍 敌 全 局 30 到 
LL 
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7.1.2 代码 全 包 加 密 


APICloud 代码 加 密 具 有 以 下 几 个 特点 。 

































































































































































































































































。 网 页 全 包 加 密 : 对 网 页 包 中 全 部 的 HIML、CSS 和 JavaScript 代码 进行 加 密 ， 加 密 后 的 
网 页 代码 都 是 不 可 读 的 ， 不 能 通过 常用 的 格式 化 工具 恢复 。 代 码 在 运行 前 都 是 加 
密 的 ， 在 运行 时 进行 动态 解密 。 

。 一 键 加 密 、 运 行 时 解密 : 在 开发 过 程 中 无 需 对 代码 做 任何 特殊 处 理 ， 在 云 编译 时 选择 代 
码 加 密 即 可 。 

















。 零 修改 、 零 影响 :加密 后 不 改变 代码 大 小 ， 不 影响 运行 效率 。 
个 安全 盒子 ， 在 盒子 内 的 代码 按照 加 密 和 解密 进行 处 理 ， 其 他 代码 
































I 





























不 受 影响 。 


。 重新 定义 资源 标准 : 对 保护 的 代码 进行 统一 资源 管理 ， 加 速 资 源 加 载 ， 加 速 代 码 运 行 。 














































































































若 想 对 代码 进行 加 密 ， 八 在 编译 时 启 全 司 加 密 即 可 o 











7.1.3 扩展 API 调 用 安全 配置 
access 于 配置 哪些 域 下 的 HIML 页 面 可 以 访问 APICloud 的 扩展 API， 如 访问 api. 
sms () 。 一 般配 置 “*”， 代 表 所 有 页 面 都 允许 访问 。 
































































































































在 “config.xml” 中 对 access 字段 进行 如 下 配置 : 





























<access origin="local" /> 


<access origin="http://apicloud.com" /> 

















origin 的 取 值 范围 如 下 。 



































。 **， 所 有 页 面 都 可 以 访问 扩展 API 方 法 ， 包 括 本 地 页 面 及 远程 Web 页 面 。 
。 local : 只 允许 本 地 页 面 可 以 访问 扩展 API 方 法 。 
。 其 他 域名 : 只 有 在 该 域 及 其 子 域 下 面 的 页 面 可 以 访问 扩展 API 方 法 ， 注 意 ， 这 里 未 区 

分 http 和 https， 配 置 http://apicloud.com 和 https://apicloud.com 的 效果 一 样 。 
入 备 使 用 本 应 用 。 若 配置 该 值 ， 在 越狱 /Root 的 设备 





































































































































































































































































































e nojailbreak : 不 允许 越狱 /Root 的 
上 使 用 本 Apb 时 ，App 将 强制 退出 。 



































默认 值 是 “*”。 

































































详细 信息 参阅 官方 应 用 配置 说 明 (app-config-manual 部 分 )。 
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7.2 版 本 管理 


随 着 App 的 运营 ， 会 不 断 地 修复 问题 并 进行 功能 迭代 。 对 不 同 版 本 的 App 需要 进行 版 本 管 
时， 本 节 对 版 本 管理 加 以 介绍 。 
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7.2.1 在 APICloud 控 制 台 管理 版 本 
APICloud 支持 App 的 版 本 管理 ， 可 以 帮 户 升级 到 新 版 本 的 App。 

































































打开 App 控制 台 ， 左 侧 选 择 “ 版 本 ”。 版 本 页 面 如 图 7-3 所 示 。 更 新 操作 方法 如 下 。 









































(1) 在 平台 中 选择 更 新 版 本 的 平台 。 




















本 开业 厂 坟 本 新 三 革 ge | zm | Rappk 志 一 


病人 PI 二 











人 3 












































(2) 在 版 本 下 拉 列 表 中 选择 要 发 布 的 版 本 ， 这 里 的 版 本 是 在 云 编译 中 编译 的 正式 版 本 App 






















































































(3) 更 新 地 址 中 填写 App 的 下 载 地 址 ， 如 果 使 用 APICloud 云 编译 后 的 下 载 地 址 可 在 云 纺 
译 页 面 查看 ， 如 图 7-4 所 示 。 











































































































(4) 更 新 备注 填写 更 新 相关 的 提示 信息 。 

















(5) 点 击 更 新 按钮 。 
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下 看 地 址 » 
http://Gownloadpkg-2picloud.com/app/downtoad?path=http://72et4.com1.20.9Ib.c 


cuddn.com/I85a9t001553a3d408622c511743792_d 





图 7 一 4 














请 参阅 官方 文档 (version_update 部 分 ) 。 


7.2.2 Config 文件 相关 配置 


本 


若 要 开启 自动 更 新 功能 ， 则 需要 在 “config.xml” 文 从 









































tT 




















进行 如 下 配置 


























<preference name="autoUpdate" value="true" /> 


7.2.3 mam 模块 
“mam” 模 块 提供 了 在 应 用 内 手动 检测 更 新 的 功能 ， 代 码 如 下 : 






































Var mam = api.require('mam'); 
mam.checkUpdate (function( ret, err ){ 












































//ret = { 
//status:true, 操作 成 功 状态 值 
//result: 
/ /1 
// update:true, 是 否 有 更 新 
// closed:true, 设备 上 当前 版 本 是 否 被 强行 关闭 
-7 version:'1.0', 新 版 本 版 本 号 
// versionDes:'', 新 版 本 更 新 描述 
// closeTip:'', 提示 用 户 应 用 版 本 被 强行 关闭 时 弹 框 的 提示 语 
I updateTip:'', 提示 用 户 有 更 新 时 弹 框 的 提示 语 
// source:'', 新 版 本 安装 包 的 下 载 地 址 
// times 新 版 本 的 发 布 时 间 
//} 
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信息 参阅 官方 文档 (Cloud 一 Service/mam 部 分 ) 。 




















































































































通常 App 的 发 布 和 更 新 需要 经 过 编译 、 应 用 市 场 审 核 、 审 核 通 过 后 用 户 安装 这 些 流 程 。 其 
应 用 市 场 审 核 时 间 难 以 控制 ， 通 常 要 经 过 一 周到 一 个 月 不 等 ， 这 不 适合 频繁 、 紧 急 的 版 本 更 
新 。 为 了 解决 这 个 问题 ，APICloud 提供 了 云 修复 功能 ， 在 开启 了 云 修复 功能 后 ， 每 当 进 行 更 新 
时 APICloud 端 引 擎 会 直接 在 网 络 上 下 载 并 使 用 Widget 的 增 量 包 。 例 如 ， 想 修改 某 一 页 面 的 显 
示 效 果 ， 只 需要 将 修改 后 的 页 面 按 照 Widget 的 目录 结构 制作 zip 压缩 包 并 上 传 到 APICloud 云 3 
台 。 客 户 端 App 在 启动 后 会 检测 并 应 用 这 个 更 新 。 这 个 过 程 没有 应 用 市 场 审核 的 环节 ， 是 即时 
的 。 云 修复 功能 如 图 7-5 所 示 。 
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> Google play 


第 三 方 Store 























修复 位 了 App 控制 台 的 云 修 由 四 。 


7.3.1 Config 文件 相关 配置 和 和 mam 模块 


若 想 使 用 云 修复 功能 需要 对 “config.xml” 进 行 如 下 修改 : 






























































<preference name="autoUpdate" value="true" /> 
<preference name="smartUpdate" value="true" /> 














此 外 还 需要 为 应 用 加 入 “mam” 模 块 。 











7.3.2 制作 并 发 布 云 修 复 包 


在 开发 者 修改 了 某 些 项 目 文件 ， 并 想 要 使 用 云 修复 发 布 时 ， 按 照 下面 的 步骤 进行 : 


























































































































(1) 将 需 


新 的 文件 按照 原 



































(2) 将 widget 














录 打 包 为 “widget.zip” 压 缩 文 件 ; 














录 结 构 进行 保存 ， 根 





















































































































































(3) 在 控制 台 云 修复 页 面 进行 相关 设置 并 发 布 云 修复 。 
例如 ， 发 者 修改 了 项 采 “html/main.html” 
“widget/html/main.html” 文 件 。 
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录 为 widget 目录 ，; 
文件 ， 那 么 在 云 修 复 包 中 则 对 应 
































:修复 页 面 如 图 7-6 所 示 ， 这 里 可 以 设置 修复 应 用 的 App 版 本 号 、 静 默 修复 或 提示 修复 、 
使 用 ur 地 址 或 上 传 zip 包 ，。 

全 只 
这 开 志 云 修复 二 人 村 oe | pS 
宗 。 济 & 理 
本 Aptciouds 用 ， | v001 | ww | 

代 汉 
2 EC a 
届 ， 云 调 泡 

图 7-6 


7.3.3 相关 API 使 用 








和 云 修复 相关 的 常 


e。 smartupdatefinish 事件 ; 














API 有 下 面 两 个 : 
































中 











e apirebootApp0 方法 。 


smartupdatefinish 事件 会 在 云 修复 结束 后 触发 ， 以 通知 App 进 


想 让 云 修 复 立 即 生 效 ， 


















































可 以 调 












































修复 


关 了 


7.4 


的 信息 参阅 











闪 屏 广告 

















apbi.rebootRApp () 这 个 API 来 习 


言 方 文 档 (smartUpdate 部 分 ) 。 


























行 了 云 修 
在 启 App。 


。 如 果 


































































































一 些 App 启动 时 会 显示 一 个 闪 屏 广告 ,通常 是 一 张 图 片 ， 经 过 几 秒 后 进入 App 首页 。 闪 
广告 可 以 向 用 户 传递 信息 ， 显 示 期 间 可 以 后 台 加 载 页 面 提 高 用 户 体验 ， 用 户 点 击 广告 可 跳 转 到 
相关 页 面 。 本 节 将 介绍 内 屏 广告 功能 。 
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7.4.1 在 APICloud 控 制 台 使 用 闪 屏 广告 


App 启动 后 ， 通 常 要 初始 化 数据 ，1 ~ 2 秒 后 出 现 应 用 具体 内 容 界 面 。 在 这 段 时 间 可 以 展 
示 一 些 内 容 ， 通 常 是 品牌 Logo、 广 告 等 。APICloud 封装 好 了 启动 页 内 屏 功 能 ， 只 需要 上 
传 相应 图 片 。 在 App 启动 时 ， 即 可 看 到 闪 屏 已 被 设置 为 上 传 的 图 片 。 广 告 页 有 倒计时 功能 ， 可 
以 点 击 “ 跳 过 ”按钮 选择 跳 过 ， 或 点 击 广告 页 ， 跳 转 到 配置 好 的 URL 页 面 。 



















































































/> 




























































































































































































































































































在 App 控制 台 闪 屏 广告 页 面 进行 相关 配置 如 图 7-7 所 示 。 






































局 用 定制 广告 页 


注意 ; 记性 这 功能 后 ， 频 用 的 启动 页 将 动态 时 示 为 你 在 此 接 交 的 图 片 。 美 所 这 功能 
和 时 , 应 用 默认 思 示 “ 请 设 杆 ”中 设 秆 的 忆 动 页 . 





vie 


云 开 发 
@ APICloud 
入 去 G 重 | ApPP 汪 本 平台 



























































































































































在 这 个 页 面 首先 开启 内 屏 广告 功能 ， 开 启 后 设置 各 个 尺寸 的 内 屏 广告 图 片 ， 若 只 设 
图 片 APICloud 会 自动 为 其 切 图 。 接 着 设置 内 屏 广告 的 显示 时 间 ， 最 后 设 户 点 击 内 屏 广告 后 
的 跳 转 地 址 (可 以 设置 “http://” 地 址 或 “widget://” 地 址 )。 










































































































































































































































































闪 屏 广告 设置 后 ，App 在 第 一 次 启动 时 需要 下 载 内 屏 广告 的 相关 配置 ， 因 此 不 会 显示 内 屏 


“ 告 。 之 后 再 次 启动 时 会 生效 。 



















































































7.4.2 相关 API 使 用 


和 内 屏 广告 相关 的 API 为 aunchviewclicked 事件 ， 当 用 户 点 击 闪 屏 广告 后 会 触发 这 个 事件 。 











































































































多 信息 参阅 官方 文档 (start-page-ad-guid) 。 











7.5 


优化 策略 








在 App 














发 过 程 




















过 这 些 优 化 可 以 提高 项 


























































































































加 以 介绍 。 


7.5.1 了 解 HTML5 特性 





在 HTML5 很 多 实 

。 去 掉 浏览 器 默认 样式 ， 

。 可 点 击 区 域 使 用 div ， 

。 使 用 语义 化 的 标签 ; 

。 发 挥 HTML5 和 CSS3 的 新 特性 。 
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许多 优化 方法 ， 例 如 提高 页 面 加 载 速度 、 屏 幕 适 配 、 图 片 处 理 等 。 通 
结构 的 合理 性 、 加 快运 行 速度 、 提 高 兼容 性 等 。 本 节 对 这 些 优化 策略 












































的 优化 技术 ， 下 面 列 举 4 个 : 
































为 了 实现 
端 框架 中 的 “api.css” 文 件 















































各 个 移动 端 默认 显示 效果 的 统 
实现 了 这 个 功能 ， 引 入 它 即 可 。 
























































，» TH 





除 浏 贤 器 引擎 的 默认 档 


Ee 














式 ，APICloud 前 







































































































































































































































































<div></div> 标签 相对 于 <a></a> 标签 显示 更 简洁 ， 不 存在 一 些 默 认 效 果 ， 对 于 点 击 区 域 
推荐 使 用 “div” 标 签 。 

语义 化 标签 有 助 于 人 和 机 器 对 文档 语义 的 理解 ， 例 如 <nav></nav> 标签 适合 存放 页 面 导航 
部 分 。 

一 些 HTML5 和 CSS3 的 新 特性 有 助 于 使 开发 更 加 简洁 高 效 ， 例 如 CSS3 中 的 动画 、 圆 角 效 
果 等 
7.5.2 窗口 结构 

对 窗口 结构 的 优化 主要 有 以 下 3 点 : 

e。 Window + Frame 结构 布局 ; 

e。 Frame 的 高 度 使 用 margin 布局 ; 

。 按 需求 优先 使 用 Layout。 

Window 和 Frame 是 原生 实现 的 ， 效 率 很 高 。 详 见 第 2 章 。 
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134 区 7 使 用 APICloud 应 
7.5.3 页 面 加 载 速 度 
对 页 面 加 载 速度 的 优化 主要 有 以 下 

















HTML、CSS、JavaScript 代码 写 在 同一 个 页 面 









































3 点 : 


管理 服务 ， 实 现 App 发 布 和 运营 















































尽量 少 地 定义 link 和 script 标签 。 























的 是 让 浏览 器 


@ 
e 公用 的 CSS、JavaScript 
@ 
以 上 3 点 
加 载 速度 。 


7.5.4 不 用 重型 框 染 










































































引擎 尽 可 能 地 一 次 读 写 (IO) 加 载 

















Jr 


尽量 少 和 小 ， 不 随意 加 载 无 用 的 CSS 或 JavaScript 文件 ; 








a 





























































































































所 有 代码 ， 加 快 页 面 的 





























使 用 APICloud 开发 混合 App 时 不 建议 使 用 重型 框架 ， 下 面 是 3 条 建议 

e 避免 使 用 jQuery 或 BootStrap 等 重型 的 框架 ; 

。 摆脱 对 $ 的 依赖 ,培养 自 己 动手 编写 原生 ]S 代码 的 习惯 ， 

。 使 用 移动 优先 、 功 能 独立 的 框架 。 

重型 框架 会 降低 加 载 速度 ， 降 低 页 面 性 能 ， 在 移动 端 存在 兼容 性 问题 ， 不 推荐 使 















































7.5.5 屏幕 适 配 










































































































































































对 于 屏幕 适 配 的 优化 要 注意 以 下 4 点 : 
。 HTML 页 面 使 用 viewport 声明 ; 

。 合适 的 UI 尺寸 (推荐 720 x 1280)， 
。 量 图 标准 要 考虑 屏幕 倍率 ， 

。 布局 方式 (弹性 响应 式 十 流 式 )。 

lL 体 参 考 第 2 章 内 容 。 




















7.5.6 数据 加 载 


数 和 

























































































































































































居 加 载 可 以 从 以 下 6 个 角度 进行 优化 : 

掌握 api.ajax 所 有 参数 配置 作用 ， 按 需求 配置 使 
监听 网 络 状 态 ; 

合理 处 理 异常 信息 ， 









































7.6 编码 规范 





























。 下 拉 刷 新 和 上 拉 加 载 ; 
e 使 用 JavaScript 模板 引擎 ; 
。 数据 缓存 。 





























{ 体 参 考 第 3 章 和 第 4 章 内 容 。 











7.5.7 图 片 处 理 
对 图 片 的 处 理 有 以 下 3 个 优化 方向 : 




































































区 











。 减少 内 存 占 用 ， 对 图 片 做 合适 的 缩 略 处 理 ， 
。 减少 图 片 缩放 等 耗 性 能 的 操作 ，; 
。 在 服务 器 端 或 使 用 第 三 方 云 服 务 来 处 理 图 片 。 




















































































































体 参 考 第 4 章 内 容 。 








7.5.8 ”交互 响应 速度 
为 提高 交互 响应 速度 可 以 从 下 面 4 点 进行 优化 : 



























































性 优化 click 事件 响应 速度 ， 
。 使 用 平台 扩展 手势 事件 ， 
。 使 用 api.parseTapmode 进行 主动 tapmode 处 理 ， 
。 扩大 点 击 区 域 和 设计 点 击 交互 效果 。 


e 使 用 tapmode 属 








HH 型 























































































































# 体 参考 第 2 章 内 容 。 








7.5.9 尊重 系统 特性 


在 系统 特性 层面 ， 可 以 从 下 面 3 个 角度 进行 优化 : 








































































































。 适时 更 新 UI， 理 解 窗 体 切 换 和 界面 泻 染 时 机 的 关系 ， 
。 避免 body 级 别 的 背景 图 片 ， 以 原生 的 方式 高 效 实现 ; 
。 页 面 之 间 使 用 pageParam 完成 轻 量 级 参数 传递 ， 避 免 使 用 过 大 的 参数 。 



































































































































7.6 编码 规范 


为 规范 编码 ， 有 以 下 几 点 建议 。 
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HH 
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。 遵循 APICloud Widget 包 结 构 来 组 成 应 


APICloud 应 






































e Window、Frame 及 HTML 文件 命名 规范 。 














。 使 用 语义 化 的 标签 组 织 页 




































































化 标签 样式 定义 需要 添加 class。 


文 命 名 ， 也 不 要 包含 大 写字 母 。 





























。 任何 文件 避免 使 
a 避免 Ea url 进行 参 
更 多 的 APICloud 编码 




















数 传递 ， 要 使 


规范 和 优化 策略 详 见 附录 A。 





7.7 Widget 管理 









































通常 一 个 App 只 需要 


对 这 一 技术 加 以 介绍 。 


个 Widget， 而 APICloud 端 引 擎 也 支持 多 个 Widget 协同 了 


7.7.1 多 Widget 架 构 


APICloud App 可 以 



































多 Widget 上 























e 通过 ID 对 Widget 进 














全 


有 如 下 特性 : 


人 























硬结 构 ，JavaScript 代码 


管理 服务 ， 实 现 App 发 布 和 运营 


代码 。 

















bageParam 。 


获取 的 元 素 要 明确 指定 id， 非 语义 





Widget 组 成 ， 它 们 的 




















行 管 ; 




















。 Widget 在 界面 上 表现 为 独立 的 窗口 容器 ， 





EY 








< 系 如 医 

































































组 成 ， 


























。 每 一 个 Widget 在 代码 、 资 源 、 窗 口上 都 完 






































。 同一 时 刻 ， 应 用 中 只 能 
。 按 作 用 分 为 了 
。 Widget 之 间 可 以 相互 调 


























全 已 过 





























E Widget 和 





























2 
全 独立 ， 
人 Widget 在 界面 显示 ; 
了 Widget; 




















[ 作 ， 本 市 
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7.7.2 主 Widget 
主 Widget 是 App 的 入 口 Widget， 具 有 如 下 特性 。 
。 加 载 机 制 : App 的 入 口 Widget，App 启动 之 后 首先 自动 加 载运 行 主 Widget。 
。 生命 周期 : 等 于 整个 应 用 的 生命 周期 关闭 主 Widget 就 会 退出 App。 
。 配置 文件 : 作为 App 的 配置 文件 ， 在 云端 编译 应 用 的 时 候 使 用 。 
。 代码 位 置 : 编译 后 存储 于 App 的 安装 包 中 ， 即 ipa 或 apk 包 中 。 
7.7.3 子 Widget 
子 Widget 被 其 他 Widget 调用 运行 ， 具 有 如 下 特性 。 
。 ”加载 机 制 : 不 会 被 App 自动 加 载运 行 ， 需 要 被 其 他 的 Widget 调用 才能 运行 。 
e 生命 周期 : 从 api.openwidget 开始 ， 到 api.closewidget 结束 。 
。 配置 文件 : 对 引擎 和 云端 设置 的 配置 项 无 效 ， 其 他 的 配置 项 有 效 。 
。 代码 位 置 : 可 以 存在 于 App 的 安装 包 中 ， 也 可 以 存在 于 App 沙 箱 中 。 
7.7.4 Widget 管 理 相 关 API 使 用 
下 面 列 出 了 和 Widget 管理 相关 的 API。 
e 打开 子 Widget : api.openWidget () 。 
e 关闭 子 Widget : api.closeWidget () 。 
e 获取 参数 : api.wgtParam。 
子 Widget 搜索 路 径 包 括 : 主 Widget 包 根 路 径 下 的 wgt 目录 和 沙 箱 中 的 wgt 目录 。 








api.openWidget ({ 
id: 'A00000001',//Widget 的 ID 











animation: {// 动 画 参 数 ， 不 传 时 使 
type: 'flip', 
subType: 'from bottom', 
500 








duration: 
} 
function (ret, err) 


}, { 


1); 


api.closeWidget ({ 





id: 'A00000001',//Widget 的 ID 
retData: {// 返 回 给 上 个 widget 的 返 








互 





默认 动画 





name: 'closeWidget"' 
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138 了 使 用 APICloud 应 用 管理 服务 ， 
}, 
animation: {// 动 画 参数 ， 不 传 时 使 
type: 'flip', 
subType: 'from bottom', 
duration: 500 





























1.8 SuperWebView 








为 了 方便 在 原生 App 























应 


























默认 动画 


实现 App 发 布 和 运营 


























APICloud 技术 ，APICloud 提供 了 SuperWebView， 它 


系统 原生 的 WebView， 本 节 将 介绍 SuperWebView 的 基本 概念 。 


7.8.1 SuperWebView 介绍 


SuperWebView 是 APICloud 一 款 悦 
差 等 问题 ， 加 速 HIML5 与 Native 的 
SuperWebView 替代 系统 WebView， 上 日 








服务 。 





7.8.2 SuperWebView 特 点 
































融合 。SuperWebView 
1 可 在 HTML5 代码 























































































































于 葵 换 

















要 的 端 引 擎 产品 ， 致 力 于 解决 系统 WebView 功能 弱 、 体 验 




















































































































































































































SuperWebView 具有 以 下 几 个 特点 : 

。 以 SDK 的 方式 提供 ， 艇 入 到 原生 工程 中 使 用 ， 

e。 可 以 为 每 个 应 用 动态 编译 生成 专属 的 SuperWebView ; 

e。 可 以 调用 平台 所 有 端 API， 通 过 应 用 控制 台 进行 配置 ， 

。 可 以 使 用 平台 所 有 的 云 服 务 ， 如 版 本 管理 、 云 修复 、 数 据 云 等 。 
关于 SuperWebView 的 更 多 信息 参阅 官方 文档 SuperWebview 开发 指 














中 > 指 


~ 
他 六 








了 kr 






























































> SDK 的 方式 提供 ， 原 生 应 用 舱 入 
使 用 APICloud 平台 的 所 有 端 API 和 云 





看 Android、SuperWebview 
洒 IOS、SuperWebView Android API Reference 和 SuperWebView iOS API Reference 


7.9 使 用 APICloud 应 用 管理 服务 ， 实 现 App 的 发 布 和 


























一 
运营 管理 
本 节 将 带领 读者 对 示例 App 进行 发 布 和 运营 管 
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7.9.1 编译 App 


在 编译 项 目 之 前 请 将 本 地 开发 完毕 的 代码 同步 到 APICloud 云端 ， 参 照 第 1 章 2.3 市 。 

































































py 


进入 示例 项 目 控制 台 页 面 ， 选 择 左 侧 的 “ 云 编 译 ” 打 开 云 编译 页 面 。 在 右 侧 选择 
编译 的 平台 (如 Android) 和 权限 (使 用 默认 权限 即 可 ) ， 类 型 选择 正式 版 。 其 余 根 据 需 要 进行 
设置 ， 然 后 点 击 “ 云 编译 ”按钮 。 页 面 会 提示 当前 的 编译 进度 ， 在 编译 完成 后 会 分 别 显示 相应 
平台 的 下 载 链接 和 二 维 码 。 





































































































































































































































































































7.9.2 版 本 发 布 
每 当 App 需要 更 新 版 本 时 可 使 用 此 功能 。 打 开 示 例 项 目 控制 台 页 面 ， 选 择 左 侧 的 “版 本 ” 
打开 版 本 控制 页 面 。 在 右 侧 窗 选择 想 要 更 新 的 平台 ， 并 选择 对 应 的 云 编 译 过 的 版 本 。 更 新 
地 址 可 以 从 云 编译 页 面 获 取 ， 然 后 粘贴 在 这 里 即 可 。 更 新 备注 填写 App 本 次 更 新 的 内 容 ， 之 后 











































































































































































































































































































7.9.3 使 用 云 修复 


下 面 尝试 使 用 云 修复 功能 。 修 改 示例 项 目的 “configxml” 文 件 : 


























iT 









































<preference name="autoUpdate" value="true" /> 
<preference name="smartUpdate" value="true" /> 


























将 修改 后 的 项 目 代码 同步 到 APICloud 云端 。 在 云 编译 页 面 发 布 示例 项 目的 正式 版 本 


到 设 














济 



















































































于 “html/main.html”， 在 “apiready” 国 数 中 评 加 : 














ert (' 进行 了 云 修复 ') ; 


py 













































































在 计算 机 本 地 任意 位 置 建立 一 个 “widget” 文 件 夹 ， 并 在 其 中 建立 一 个 “html” 文 件 夹 ， 将 
工程 中 的 “html/main.html” 找 由 到 刚 创 建 的 “html” 文 件 夹 中 ， 即 “widget/html/main.html”。 
将 “widget” 文 件 压缩 为 “widget.zip” 文 件 ， 务 必 确 保 压 缩 包 为 zip 格式 。 


















































































































































打开 App 控制 台 进 入 “ 云 修复 ”页 面 ， 选 择 “APICloud 应 用 ”并 选择 刚 编译 的 版 本 号 。 右 
便 选 择 上 传 更 新 文件 ， 将 刚 创建 的 “widgetzip” 进 行 上 传 ， 然 后 点 击 更 新 按钮 。 












































































































































运行 刚刚 安装 的 App 即 可 自动 进行 云 修复 ， 修 复 后 的 App 在 启动 后 会 弹出 对 话 框 显示 “ 进 
行 了 云 修 复 ”。 如 图 7-9 所 示 。 
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进行 了 云 修复 





7.9.4 闪 屏 广告 


































































































屏 广 告 页 面 ， 开 启 闪 屏 














先 编译 App 的 正式 版 本 并 安装 到 移动 端 ， 然 后 在 控制 台中 打开 内 
广告 。 选 择 想 要 使 用 的 图 片 并 设置 显示 时 间 后 保存 。 



























































































































































闪 屏 广告 启用 后 ，App 的 第 一 次 启动 需要 下 载 办 屏 广告 的 相关 信息 ， 不 会 应 用 闪 
再 次 启动 Apb 即 可 观看 效果 。 






























































7.10 小 结 











本 章 学 习 了 APICloud 项 目 编译 、 版 本 管理 、 云 修复 和 内 


广 、 













































































CC 


屏 广 告 功 生 
APICloud 项 目的 优化 策略 ， 以 及 多 Widget 和 SuperWebView 技术 的 简单 使 











的 使 用 方法 和 开发 
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Fi 


通过 第 一 部 分 的 学 习 ， 读 者 已 经 了 解 了 APICloud 开发 技术 的 基本 原理 、 引 擎 架构 和 常用 的 
发 技术 。 从 如 何 创建 一 个 项 目 到 编译 发 布 和 版 本 管理 ， 涉 及 了 静态 页 面 开发 、 与 服务 器 的 通讯 、 数 
据 泻 染 和 模板 引 警 、 常 用 模块 的 使 用 以 及 第 三 方 服务 模块 的 接 入 和 使 用 。 由 于 篇 幅 限 制 很 多 静态 页 
面 的 代码 无 法 放 入 本 书 中 ， 读 者 可 以 通过 本 书 的 在 线 资源 获取 这 些 已 经 编写 好 的 内 容 。 一 些 接口 的 
调用 ， 如 获取 城市 列表 、 获 取 商 品 列表 在 本 书 的 正文 部 分 也 没有 体现 ， 读 者 可 以 从 相关 在 线 文档 获 
取 并 在 合适 的 地 方 实现 。 读 者 在 理解 第 一 部 分 的 内 容 后 再 加 以 灵活 运用 就 可 以 开发 常见 的 App 了 。 












































本 书 示例 App 完整 版 本 的 全 部 代码 可 以 在 GitHub 仓库 中 获得 (第 一 部 分 \ 示例 项 目 资源 \ 完 
整 项 目 \widget)。 


















































Ei 


实战 技巧 : 如 何 开 发 一 丈 优质 的 App 
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通过 第 一 部 分 的 学 习 ， 相 信 大 家 已 经 能 够 使 用 APICloud 技术 开发 一 款 App 了 。 人 入门 虽 易 ， 
侈 行 不 易 ， 通 常 需要 积累 更 多 的 项 目 开发 经 验 ， 才 能 够 开发 出 一 款 优质 的 App。 本 部 分 编制 的 
的 就 是 快速 增加 读者 的 项 目 开发 经 验 ， 本 部 分 所 述 实战 技巧 由 诸多 一 线 资深 APICloud 开发 工 


程 师 从 实战 角度 出 发 ， 总 结 多 个 项 目 经 验 ， 由 浅 入 深 ， 精 心 提炼 编制 而 成 。 


























































































































































































































































































































需要 特别 指出 的 是 ， 本 部 分 讲述 的 是 App 开发 的 进 阶 内 容 ， 适 合 已 经 具备 APICloud App 
发 能 力 的 开发 者 ， 对 于 新 手 朋友 们 ， 建 议 学 完 本 书 第 一 部 分 以 后 ， 再 来 学 习 这 部 分 的 内 容 。 
另外 ， 本 部 分 第 12 章 调试 技巧 主要 是 讲解 如 何 使 用 第 三 方 软件 工具 来 辅助 APICloud App 开发 
的 中 高 级 技巧 。 对 于 初学 者 ， 如 感觉 阅读 有 难度 ， 可 先 忽略 ， 并 不 会 影响 对 APICloud App 开发 
的 学 习 。 
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本 部 分 的 诸多 实战 技巧 Demo， 大 家 既 可 以 将 其 当 作 一 个 学 习 参 考 对 象 ， 也 可 以 直接 将 之 
应 用 到 自己 的 具体 App 项 目 中 。 希 望 大 家 在 学 习 技 巧 的 同时 ， 能 够 领会 其 中 蕴含 的 设计 思想 。 
本 部 分 的 主要 用 意 还 是 抛砖引玉 ， 让 大 家 从 多 角度 、 更 深层 次 的 发 气 APICloud 所 蕴含 的 技术 能 
力 和 技术 潜力 ， 从 而 能 够 开发 出 更 优质 的 App 产品 。 















































































































































































































































这 部 分 中 的 实战 技巧 的 完整 源码 和 应 用 模块 配置 说 明 详 见 本 书 GitHub 仓库 (第 二 部 分 / 实 
战 技巧 示例 源码 ) ， 同 时 我 们 也 准备 了 一 个 将 所 有 实战 技巧 整合 在 一 起 的 演示 App， 读 者 可 以 
GitHub 仓库 (第 二 部 分 / 实战 技巧 演示 Demo 安装 包 ) 中 下 载 并 安装 演示 App， 以 查看 这 些 实 
战 技巧 的 实际 运行 效果 。 

























































































































































































第 8 章 











如 何 与 众 不 同 


主要 内 容 


示例 1 和 示例 2 讲 的 是 


示例 3 讲 的 是 “基础 特性 ”， 


就 会 变 得 简单 ; 


“融合 ”， 


示范 了 APICloud 模块 与 HTML5 代码 混合 开发 的 使 用 技巧 ; 


帮助 开发 者 理解 与 掌握 APICloud 的 基础 特性 ， 这 样 需求 实现 


示例 4 一 示例 6 讲 的 是 CSS 的 使 用 技巧 ，APICloud 采用 HTML、CSS 和 JavaScript 为 主 开 
发 语言 ， 可 以 完美 实现 各 种 CSS 样式 效果 。 


学 习 目 标 
(1) 实现 自 定义 样式 的 日 期 选择 器 。 
(2) 实现 自 定义 样式 的 三 级 联动 城市 选择 器 。 
(3) 实现 固定 不 动 的 下 拉 筛 选 菜单 。 
(4) 实现 滑动 页 面 时 ， 动 态 改变 导航 条 颜色 。 
(5) 实现 背景 图 片 的 高 斯 模糊 效果 。 


(6) 实现 0.5 px 的 细 线 。 














以 下 示例 讲解 仅 选 扫 





部 分 





示例 的 完整 代码 。 




















AN 


核心 代码 进行 详 

















说 明 ， 


读者 可 在 GitHub 本 
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的 资源 范例 











获取 
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如 何 与 众 不 同 


8.1 自 定义 样式 的 日 期 选择 右 








APICloud 模块 因 其 易 


APICloud 模块 ， 可 以 修改 颜色 、 字 体 、 背 景 









































3 性、 高 效 性 ， 在 APICloud 应 用 开发 中 会 被 频繁 地 使 用 。 














的 整体 布局 结 





























YY 






































结构 是 无 法 改变 的 。 本 示例 提供 








色 等 样式 ， 





成 不 同 的 风格 与 外 观 样 式 ， 但 模块 








UI 类 的 










































































HTML 快速 布 











下 面 采用 HTML 页 












































如 图 8-1 所 示 。 


























司 形成 不 同 的 页 面 格局 ， 形 成 另类 的 视觉 体验 。 











与 APICloud 模块 混合 府 套 的 方式 ， 实 现 一 个 不 一 样 的 


种 思路 ， 将 HTML 页 面 与 模块 混合 


搭配 ， 利 用 

















年 月 日 
2016 10 28 
2017 11 29 
2018 12 30 
取消 
图 8-1 


8.1.1 使 用 模块 UICustomPicker 
UICustomPicker 模块 是 一 个 自 定义 内 容 选 择 器 ， 可 自 定义 模块 位 置 、 内 容 取 值 范 围 、 内 容 




































































标签 、 设 置 选 ! 








内 容 ， 还 可 








日 期 选择 器 ， 





























于 实现 固定 取 什 

















范围 的 内 容 选 择 器 ， 多 项 内 容 之 间 没 











有 级 联 关 系 。 
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8.1.2 开发 流程 及 要 点 概述 


本 示例 的 实现 思路 是 先 用 HTML 代码 创建 一 个 背景 页 面 ， 然 后 将 模块 打开 在 这 个 背景 层 上 
面 ， 从 而 从 视觉 上 实现 既定 站 



































































































































LE 








标 样 式 。 









































(1) 实现 HTML 静态 页 面 开 发 











上 









































T 
A 
心 > 


为 相关 页 面 添 加 如 下 HTML 代码 ， 使 用 了 弹性 盒子 布局 。 篇 幅 所 限 ，CSS 样式 部 分 就 不 在 
这 里 列 出 ， 具 体 可 从 示例 源码 中 获取 查看 。 注 意 页 面 中 的 onclick 点 击 事件 使 tapmode 属性 
消除 300 ms 的 点 击 延 迟 。 








































































































过 






























































二 





























/* HTML 页 面部 分 代码 * / 

<body class="flex-box flex-column"> 
<div class="flex-1"></div> 
<div class="sheet"> 





<div class="flex-box sheet-header"> 
<div class="Btn"></div> 
<div id="title" class="flex-1"> 请 选择 日 期 </div> 
<div class="Btn" tapmode="touched" onclick="fnCompleteBtnTouched();"> 完 成 </div> 
</div> 
<div class="sheet-body"> 
<div class="title flex-box"> 
<span class="flex-1"> 年 </span> 
<span class="flex-1"> 月 </span> 
<span class="flex-1">H </span> 
</div> 
<div id="picker-container" class="flex-box flex-column"> 
<div class="flex-1"></div> 
<div class="cell"></div> 
<div class="flex-1"></div> 
</div> 
</div> 
<div class="cancel" tapmode="touched" onclick="fnCancelBtnTouched();"> 取 消 </div> 
</div> 
</body> 









































(2) 创建 日 期 选择 器 





















































创建 模块 实例 ， 在 open 方法 中 定义 了 模块 的 位 置 、 大 小 尺寸 和 颜色 样式 、 可 选 的 时 间 范 
等 参数 。 在 open 方法 的 回调 中 记录 了 模块 的 ID 值 ， 用 于 后 续 操 作 模 块 的 逻辑 方法 时 使 
时 加 入 了 设置 模块 初始 化 显示 的 默认 值 方 法 和 防止 选择 错误 日 期 (如 2 月 30 日 ) 的 方法 。 














I 
mk 
匠 

ml 

dl 










































































































































































nl 





















































TT 





为 相关 页 面 添 加 如 下 代码 : 

















// JavaScript 部 分 代码 
var UICustomPicker; // 模 块 对 象 
var vPickerId; // 记录 当前 模块 ID 的 变量 
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function fnOopenPicker() { // 创建 联动 选择 器 
UICustomPicker = api.require('UICustomPicker'); // 引入 模块 
// 定义 模块 初始 化 需要 的 参数 
// 根据 页 面 HTML 布局， 定义 模块 所 在 位 置 参 数 
var tY = api.winHeight - 184 - 10;  // 定义 模块 rect 中 的 Y， 起 始 高 度数 值 
var tW = api.frameWidth - 40; // 定义 模块 rect 中 的 w， 宽 度数 值 
// 定义 模块 可 选择 的 时 间 范 围 参数 
// 获取 当前 年 份 
var tNow = new Date() 
var tYear = tNow.getFullYear(); // 获取 当前 年 份 
var tMonth = tNow.getMonth(); // 获取 当前 月 份 


















































var tDate = tNow.getDate(); // 获取 当前 日 期 
var tMinYear = tYear - 100; // 可 选 最 小 时 间 ,100 年 前 
var tMaxYear = tYear + 100; // 可 选 最 大 时 间 ,100 年 后 
UICustomPicker.open({ 
rect: { 
Ys 0, 
区 ts 
w: twW, 
li L135 
}, 
styles: { 


bg: "rgbat6lr6dlr L700 "sr 
normalColor: rgbalelt1, 61.0,.5) *s 
selectedColor: '#3d3d3d', 
selectedSize: 28, 
tagColor: '#3685dd', 
tagSize: 16 
}, 
data: [{ 
scope: tMinYear + '-' + tMaxYear 
}, 1 
scope: '1-12' 
}, A{ 
scope: '1-31' 
}], 
autoHide: false, 
loop: true, 
TOWSS. 3 
fixedon: api.frameName, 
fixed: true 
}, function(ret, err) { 
££ (rety 蒜 
if('number' == typeof ret.id) { 
vPickerId = ret.id; // 记录 当前 模块 的 ID 





小 


if('show' === ret.eventType) { 
// 设置 当前 时 间 为 默认 值 
Var tDefault = [tYear,tMonth+l,tDatel]; 
fnsetSelectedValue (tDefault); 
’ 
if('selected' === ret.eventType) { 
// 判断 选择 值 的 合法 性 
fnCheckSelectedValue (ret .data); 
} 


学 
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并 且 每 个 月 的 天 数 不 同 ， 所 以 需要 完善 日 期 选择 器 ， 加 上 补充 逻 
辑 ， 以 避免 出 现 选择 了 x x x x 年 2 月 31 日 的 错误 发 生 。 






















































































/** 
* 间 年 判断 
* Q@param {Number} pYear 4 位 数字 组 成 的 年 份 值 
* BConstructor 
人 
Date.prototype.isLeapYear = function (PYear) 1{ 
var self = this; 





Var tYear = 'number' === typeof pYear ? pYear:self.getFullYear(); 
return (tYear $ 4 == 0) && (tYear % 100 != 0 || tYear $ 400 == 0); 


} 


var oSelectedData; // 选择 的 时 间 数 组 

/** 

* 判断 选择 值 的 合法 性 

* @param {Array} pData 日 期 选择 器 选择 后 的 
* @return {void} 

Bh 

function fnCheckSelectedValue(pData) { 
if('[object Array]' !== Object.prototype.toSstring.call(pData)) { 

return; 

















互 





调 数据 





} 
// 判断 特殊 日 期 
// 获取 月 份 进行 判断 
var tData = pData; 
switch {tData[ll]} 1 
Case '2': 
// 判断 是 否 为 头 年 
Var tNum = '28' 
if(new Date().isLeapYear (tData[0]))t{ 
tNum = 12917 

















} 

if( ParseInt (tData[2]) > parseInt (tNum) ){ 
tData[2] = tNum; 
fnSsetSelectedVvalue (tData); 

} 

else { 
oSelectedData = tData; 

} 


break; 
Case '4': 
GHBE. “hr 
Case '9': 
oase "Ll 
if( tData[2] == '31') { 
tData[2] = '30'; 


fnSsetSelectedVvalue (tData); 
} 
else { 
oSelectedData = tData; 
} 
break; 
default: 
oSelectedData = tData; 
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} 


/大大 

* 主动 设置 选择 器 的 选择 值 

* @param {Array} pData 日 期 选择 器 选择 后 的 回调 数据 
* @return {void} 

A 

function fnSetSelectedValue (pData) { 


if('[object Array]' !== Object.prototype.toSstring.call(pData)) { 
return; 





























} 
UICustomPicker.setValue({ 
id: vPickerId, 
data: pData 
}); 
oSelectedData = pData; 








(4) 加 入 HTML 页 
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按钮 点 击 事件 















































点 击 事件 是 3 





现 模 块 和 


并 

区 

有 
1 


[ 面 的 交互 逻辑 的 。 











并 
































Tt 











性 | 








fnCancelBtnTouched() 国 数 方法 





使 用 了 api.pageParam 这 个 api 的 属性 ， 
win( 表示 回调 的 win 名 称 ) 和 cb_frm (表示 回调 的 frame 窗口 名 称 ) ， 有 具体 对 应 的 值 











三 
dm 


砚 -~ 
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TT 




















级 打开 本 页 面 的 窗口 传送 过 来 的 ， 这 样 的 好 处 是 方便 本 页 面 封装 成 一 个 通用 的 公共 页 
灵活 。 为 相关 页 面 添 加 如 下 J]S 代码 : 
























































jn 


// 取消 按钮 点 击 事件 
function fnCancelBtnTouched() { 
api.execScript ({ // 调用 上 级 页 面 方法 来 关闭 选择 器 
name: api.pageParam.cb_win, 
frameName: api.pageParam.cb_frm, 
script: 'fnCloseSheetFrame();'"' 
}); 

































































fnCompleteBtnTouched() 完成 按钮 的 点 击 事件 ， 将 关闭 页 面 的 方法 放 在 了 上 级 页 





TT 




































































TT 

















api.execscript 方法 去 调用 执行 。 这 样 处 理 是 为 了 避免 页 面 关闭 的 执行 过 快 ， 后 续 的 
尺码 还 没 来 得 及 执行 或 没有 执行 完 ， 从 而 产生 错误 异 和 


bo 







































































// 完成 按钮 点 击 
function fnCompleteBtnTouched() { 
if(!oSelectedData oSelectedData.length == 0) { 


api.toast ({ 
msg: ' 请 选择 日 期 ! '， 
durations 20005 
location: "bottom' 

}); 

return; 














} 


else { 





心 
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/* 执行 完成 后 续 业 务 罗 辑 */ 

// console.1og(' 选择 数据 :'+JSON.stringify (oSelectedData)); 
api.execScript ({ // 执 行 选择 后 的 回调 方法 

name: api.pageParam.cb_win, 

frameName: api.pageParam.cb_frm, 

script: api.pageParam.cb_fun+' ('+JSON.stringify(oSelectedData)+');"' 
1); 

} 
} 







































































本 示例 的 点 击 事件 中 使 用 的 api .pageParam 对 象 是 由 上 级 页 面 传递 的 ， 目 的 是 将 页 面 选择 
的 数据 回 传 给 调用 的 上 级 页 面 。 































































































8.2 ”自动 义 样式 的 三 级 联动 城市 选择 如 


本 示例 是 一 个 “省 、 市 、 区 ”三 级 联动 选择 器 ， 在 实际 App 开发 中 ， 用 户 会 经 常 遇 到 选择 
省 、 市 、 区 的 功能 需求 。 本 示例 开发 思路 及 原理 与 8.1 示例 相同 ， 均 展示 如 何 使 用 HIML 页 本 
结合 模块 实现 功能 逻辑 。 完 成 效果 图 如 图 8-2 所 示 。 



























































m 
Tt 















































































































































省 市 区 
山西 省 包头 市 海 劾 济 区 
内 蒙古 自治 区 乌 海 市 海南 区 
辽宁 省 赤峰 市 乌 达 区 
取消 
图 8-2 
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8.2.1 使 用 模块 . UILinkedPicker 











UILinkedPicker 是 分 级 联动 选择 器 模块 ， 支 持 





























定义 选 



































(Android 和 暂 仅 最 大 支持 3 级 ) 和 数 
容 选 择 器 ， 多 项 内 容 之 间 有 级 联 关系 。 
































8.2.2 ”开发 流程 及 要 点 概述 








居 源 ， 可 手动 设置 指定 选 














对 器 的 大 小 、 人 位置、 内容 及 其 级 别 
项 ， 用 于 实现 固定 取 值 范围 的 内 



























































本 示例 的 设计 思想 与 8.1 节 示 例 相 同 ， 但 
块 ， 而 本 示例 模块 是 层级 联动 的 。 























又 别 在 于 使 用 了 

















(1) 实现 HTML 静态 页 再 





























/* HTML 页 面部 分 代码 * / 


<body class="flex-box flex-column"> 
<div class="flex-1"></div> 
<div class="sheet"> 
<div class="flex-box sheet-header"> 
<div class="Btn"></div> 
<div class="flex-1"> 请 选择 </div> 


发 ,为 相关 页 面 添 























不 同 的 模块 ，8.1 节 是 非 联动 的 模 


加 如 下 HTML 代码 : 


<div class="Btn" tapmode="touched" onclick="fnCompleteBtnTouched();"> 完 成 </div> 


</div> 
<div class="sheet-body"> 
<div class="title flex-box"> 
<span class="flex-1"> 省 </span> 
<span class="flex-1"> 市 </span> 
<span class="flex-1"> 区 </span> 
</div> 











<div id="picker-container" class="flex-box flex-column"> 


<div class="flex-1"></div> 
<div class="cell"></div> 
<div class="flex-1"></div> 
</div> 
</div> 


<div class="cancel" tapmode="touched" onclick="fnCancelBtnTouched();"> 取 消 </div> 


</div> 
</body> 
































(2) 创建 联动 选择 器 ， 为 相关 页 面 添加 如 下 代码 : 


//JavaSscript 部 分 代码 
var UILinkedPicker; // 模块 对 象 
var oSelectedData; // 用 户 选 择 内 容 
function fnopenpicker () // 创建 联动 选择 器 
UILinkedPicker = 
Var tY = api.winHeight - 184 - 10; 
Var tW = api.frameWidth - 40; 

















UILinkedPicker.open({ 


api.require('UILinkedPicker'); J] 
// 计算 选择 器 高 度 4 
// 计算 选择 器 宽度 


// 


始 


台 化 模块 对 象 








& 标 y 数值 
w 数值 
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rect: { 
x 20 
学 ty 
w: 七 W， 
hs L135 
}, 
Stylass 并 
bg rgbatél, lL 0 
text: { 
size: 14， 
selected: '#3d3d3d', 
normals "ryba(ttl S16170 5. 
}, 
item: { 





























// w: 80,//( 可 选项 ) 数字 类 型 ， 背景 视图 的 宽 ， 默 认 值 ， 单 元 格 宽 -20， 本 页 面 该 参数 使 用 默认 值 即 可 
h: 45， ”//( 可 选项 ) 数字 类 型 ， 背 景 视 图 的 高 ， 默 认 值 : 单元 格 高 -20 
normal: 'rgba(61, 61,61,0)'，//( 可 选项 ) 字符 串 类 型 ， 常 态 背 景色 ， 支 持 rgb、rgba\#; 默 




















认 值 : #87ceeb 
selected: 'rgba(61,61,61,0)'，//( 可 选项 ) 字符 串 类 型 ， 选 中 后 的 背景 色 ， 支 持 rgb、 











rgba、# ; 默认 值 : #218868 
zoomIn: 1.2 //( 可 选项 ) 数字 类 型 ， 选 中 后 放大 倍数 ,， 默 认 值 : 1.2 














data: 'widget://res/city_level3.json'， // 引用 的 数据 源 文件 
EOWSS 3 
fixedOon: api.frameName 
}, functionl(ret, err) { 
if (ret) { 
if (ret && 'object' === typeof ret.selects) { 
oSelectedData = ret.selects; 














(3) 加 入 HTML 页 




















I 








按钮 点 击 寻 








六 


F， 添 加 如 下 代码 : 











jn 


// 取消 按钮 点 击 事件 
function fnCancelBtnTouched() { 
api.execScript ({ 





name: api.pageParam.cb_win, 
frameName: api.pageParam.cb_frm, 
script: 'fnCloseSheetFrame();'" 
}); 
} 





// 完成 按钮 点 击 
var vBtnTouched = false; 
function fnCompleteBtnTouched() { 
if (!oSelectedData || oSelectedData.length == 0) { // 判断 是 否 已 选择 数据 
api.toast ({ 
msg: ' 请 选择 省 市 区 ! '， 
duration: 2000, 
location: "bottom' 








}); 
return; 
} else { 
// console.1og(' 选择 数据 :'+JSON.stringify (oSelectedData)); 
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8.3 实现 固定 不 动 的 下 拉 筛 选 莱 单 





| 
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api.execScript ({ // 执 行 选择 后 的 
api .pageParam.cb_win, 


api.pageParam.cb_frm, 
api .pageParam.cb_fun+' ('+JSON.stringify(oSelectedData)+');" 


name: 


frameName: 


script 


可 





可 调 方法 





























本 示例 展示 了 利 


所 示 。 








APICloud 的 系统 特 
































性， 巧妙 实现 男 


工 ， 




















































































































定 不 动 的 下 拉 筛 选 菜单 ， 如 














































































































































































































图 8 一 3 
亦 现 这 种 菜单 的 难点 在 于 ， 如 果 采 用 CSS 定位 的 方式 使 用 下 拉 刷 新 ， 不 可 避免 的 就 会 出 现 
筛选 菜单 跟随 页 面 一 起 滑动 ， 做 不 到 固定 在 页 面 上 方 。 解 决 这 个 问题 可 以 用 一 个 APICloud 最 妇 
本 的 概念 来 实现 ， 即 Window+Frame 的 UI 结构 。 使 用 Frame， 可 以 使 菜单 层 对 列表 层 达 到 完全 
覆盖 ， 列表 下 拉 刷 新 时 不 会 拖 动 菜单 。 
APICloud 的 App 的 结构 是 Window+Frame，Window 一 般 是 固定 不 动 的 header 和 
， 列 表 放 在 Framel 中 ， 















































因 这 种 思想 ， 将 





footer。 可 以 根 和 








本 定 不 动 的 筛选 栏 放 在 Window 的 头 前 




















和 节选 





菜单 放 在 另 一 个 Fra 











Oo 

CD 
站 
当 

ey! 
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me2 























/* 
* 首先 在 window 中 打 玫 
of 
api.openFrame({ 
name: 'framel', 
url pathl™y // 
rect: { 





0， 


en 
"auto” 


DS x 


]v 

bounces: true / 
}); 
/大 
* 之 后 在 window 中 打 玫 














在 Window 中 的 关键 代码 片段 如 下 : 


F 列 表 页 framel 





// frameName 


文件 的 地 址 





header.h，// header.h 代 表 的 是 neader 的 高 度 ( 纯 数字 ， 不 带 px 等 单位 ) 

















/ 页 面 的 弹 动 效果 ， 当 页 面 使 用 下 拉 刷 新 的 时 候 ， 会 强制 变 成 true 








F 列 表 页 frame2 


























* 打开 的 时 候 ， 要 将 frame 打开 在 屏幕 之 外 ， 来 隐藏 这 个 frame， 不 让 用 户 看 到 





id 
api.openFrame ({ 
name: 'frame2', 
url path2" ,7 
rect: { 


header.h 
"auto'sy 
"auto'" 


DE x 


}, 
bounces: false, 
baocolors "roqbat 








// frameName 


文件 的 地 址 











api.winWidth，// window 的 宽度 ， 这 样 就 可 以 将 frame2 先 隐 藏 掉 








，// header.h 代 表 的 是 headez 的 高 度 〈 纯 数字 ， 不 带 px 等 单位 ) 








// 菜单 页 面 不 需要 弹 动 的 效果 
0,0,0,0.3)'， // 淡淡 的 遮 罩 层 


























之 后 是 在 Frame2 








/* 





的 关键 代码 片段 

















* 在 Frame2 的 apiready 方 法 被 调用 之 后 ， 执 行 一 下 setFrameAttr 方 法 ， 来 改变 Frame2 的 位 置 ， 并 隐藏 


类 
apiready = function 
api.setFrameAtt 
name: api.f 
FGts 寺 
: 了 
}, 





() { 
z({ 
rameName，// 这 里 获取 的 是 自己 的 frameName 一 一 frame2 




















让 frame2 的 x 轴 位 置 归 0 


hidden: true // 让 frame2 隐藏 


}); 






































这 样 一 来 ，Frame2 就 处 于 隐藏 状态 了 。 需 要 显示 的 时 候 ， 在 Window 里 面 进行 调用 ， 代 码 





api.openFrame({ 
































name: 'frame2',// frameName 


D0000000000000 https//yabook.org 


154 








第 8 章 ， 如 何 与 众 不 同 





url: 'path2',// 文件 的 地 址 
rect: { 
x: api.winWidth，// window 的 宽度 ， 这 样 就 可 以 将 frame2 先 隐藏 掉 
y: header.h，// header .hn 代表 的 是 neader 的 高 度 ( 纯 数字 ， 不 带 px 等 单位 ) 
w; "auto'v 
hs “autor 

















bounces: false，// 菜单 页 面 不 需要 弹 动 的 效果 
bgColor:'rgba(0,0,0,0.3)' // 淡淡 的 庶 蛙 层 





1); 
/大 














* 在 frame 被 隐藏 的 状态 下 , openFrame 会 把 这 个 隐藏 的 frame 提 到 这 个 window 的 最 上 层 ， 不 需要 重新 打 


















































* 这 样 做 是 为 了 对 打开 页 面 的 性 能 做 优化 ， 先 打开 ， 之 后 隐藏 ， 下 次 需要 的 时 候 打 开 ， 会 极 大 的 加 快 打开 页 


















































在 需要 隐藏 菜单 的 时 候 ， 可 以 使 用 下 面 的 代码 : 




















api.setFrameAttr({ 
name: api.frameName，// 这 里 获取 的 是 自己 的 frameName 一 一 frame2 
hidden: true // 让 frame2 隐藏 

1 

/大 

* 让 frame2 继续 处 于 隐藏 的 状态 

6 
































结果 如 图 8-4 所 示 : 





快餐 便当 107 


特色 菜系 508 


异国 料理 1 


小 吃 夜 宵 


frame2 





8-4 


的 速 








> 旦 





8.4 








动 页 





让 








8.4 清 动 页 面 动态 改变 导航 条 颜色 

















































































































可 动态 改变 导航 条 颜 
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我 们 经 常 可 以 在 一 些 App 到 在 上 下 滑动 页 面 时 ， 顶 部 导航 条 的 颜色 会 跟随 滑动 状态 发 
生 改 变 。 本 节 将 示范 如 何 实现 这 一 功能 。 
8.4.1 实现 思路 

比 功能 由 两 个 功能 单元 组 成 : 获取 页 面 滑动 事件 和 改变 头 部 颜色 样式 。 

企 页 面 滑动 事件 的 回调 中 ， 调 用 改变 导航 条 样式 的 方法 ， 就 可 以 完成 该 功能 的 开发 ， 获 
取 页 面 滑动 事件 。 可 以 通过 定义 的 onscroll 事件 ， 即 window.onscroll 来 实现 ，window. 
onscroll 用 来 为 当前 页 面 的 页 面 深 动 事件 添加 事件 处 理 函 数 。 

window.onscroll = function() { 

/* 

这 里 写 滑动 事件 触发 时 的 执行 逻辑 代码 

移动 端 获 取 深 动 条 距离 scrolltop 方 法 

var scrolltop = document .body.scrollTop; 

ba 

} 

改变 头 部 样式 就 是 一 个 简单 的 DOM 元 素 操作 ， 使 用 Js 改变 导航 条 header 元 素 的 样式 可 以 
实现 。 
8.4.2 知识 点 说 明 

本 示例 将 导航 条 header 部 分 单独 放置 在 一 个 Frame 页 面 中 ， 这 样 做 的 目的 是 当 滑 动 页 面 内 
使 用 了 UI 类 模块 时 ， 因 为 UI 类 模块 的 显示 优先 级 高 ， 普 通 的 DOM 元 素 无 法 遮挡 模块 ， 一 旦 
UI 类 模块 和 导航 条 header 重 全 ， 就 会 出 现 UI 类 模块 在 导航 条 header 的 上 面 划 过 ， 导 航 条 会 被 
遮挡 住 ， 所 以 将 导航 条 header 放 在 Frame 页 面 中 ， 避 免 此 类 问题 的 发 生 。 

window-.onscrol 事件 方法 会 在 很 多 需要 通过 监听 页 面 滑动 距离 来 触发 事件 的 场景 到 ， 
比如 通讯 录 功 能 中 在 滑动 通讯 录 列 表 页 面 时 右 侧 的 竖 排 26 个 字母 会 跟随 当前 列表 的 姓名 母 
做 相应 变化 ， 这 个 就 可 以 通过 onscroll 事件 来 完成 实现 。 

















8.4.3 核心 部 分 代码 








下 面 

















是 实现 本 示例 的 核心 代码 。 
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e index.html 主页 面 获 取 页 











IT 

















滑动 高 度 ， 调 用 window.onscroll 的 实际 代码 ， 示 例如 下 : 























function addChangeHeaderColorMethod() { // 添加 滚动 改变 头 部 颜色 方法 
var tHeight = api.winHeight/2; 
window.onscroll = function(){ 
// 核心 代码 ， 获 取 当 前 页 面 的 滑动 距离 
Var tScrollTop = document .body.scrollTop; 
// 人 为 控制 滑动 距离 参数 值 ， 实 现 颜 色 的 可 控 变化 
if(tScrollTop>tHeight) { 
tScrollTop = tHeight; 





} 
// 使 用 execscript 方法 远程 调用 header 页 面 的 changeHeaderColor 方 法 ， 并 将 滑动 距离 参数 传递 过 去 ， 实 
现 滑动 距离 和 颜色 变化 的 动态 关联 
api .execScript ({ 
name: api.winName, 






































frameName: '‘'index_ header_frm', 
script: 'changeHeaderColor('+tScrollTop+');'" 











。 index_header_frm 页 面 改变 头 部 颜色 的 方法 ， 代 码 如 下 : 




















/** 
* 添加 滚动 改变 头 部 颜色 方法 
* Q@param {Number} pScrollTop 滚动 高 度 
* @return {Void} 
A 
function changeHeaderColor (pScrollTop) { 
var tScrollTop = pSerollTop; 
// 头 部 透明 度 ， 当 滚 动 高 度 是 屏幕 高 度 一 半 是 ， 设 置 透明 度 为 1( 不 透明 ) 
var tHeaderAlpha = tScrollTop/ (api .winHeight/2); 
// 改变 头 部 Header 的 背景 色 




















eHeader.style.backgroundColor = 'rgba(254,88,94,'+tHeaderAlpha+')'; 
// 改变 头 部 Header 的 字体 颜色 
eHeader.style.color = 'rgba(255,255,255,'+tHeaderAlphat+')'; 


8.5 实现 高 斯 模糊 的 背景 图 片 


移动 应 役 都 会 有 个 人 中 心 这 样 的 功能 模块 。 在 显示 头像 的 布局 时 会 要 求 以 高 斯 
模糊 效果 的 头像 为 背景 。 然 而 在 使 用 CSS 的 滤 镜 效果 时 ， 会 发 现 图 像 的 四 哲 
框 ， 无 法 满足 UI 的 设计 效果 。 那 么 这 种 场景 应 该 怎样 实现 呢 ? 下 面 将 详细 讲解 如 
糊 的 背景 图 片 。 
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界面 效果 如 图 8-5 和 图 8-6 所 示 ， 分 别 为 未 处 理 过 的 滤 镜 效果 和 处 理 过 的 滤 镜 效果 。 
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图 8-5 


























4 体 实现 高 斯 模糊 功能 的 步骤 如 下 。 








(1) HTML 布局 参照 如 下 代码 : 


S 





// 背景 布局 
<div class="main"> 

<img class="blur" src="image/index_bg.jpg"” />// 背景 图 片 
</div> 





// 头 像 布局 
<div class="content"> 

<img class="content_img" src="image/index bg.jpg" />// 头 像 图 片 
</div> 












































(2) CSS 处 理 高 斯 模糊 背景 参照 如 下 代码 : 








.main { 

position: relative; 

width: 100%; 

height: 200px; 

overflow: higdden; // 重 点 : 设置 超出 隐藏 
} 


.Content { 








position: absolute; 
top: S50px; 

left: 5S5Opx; 

width: 52px; 
height: 52px; 


.Content_img { 
width: 50px; 
height: S50px; 
border-radius: 26px; 
border: lpx solid #ccc; 


blurt 
position : absolute; 
top : -10%; // 重 点 : 设置 背景 图 片 比 背景 布局 整体 大 一 些 ， 由 于 超出 隐藏 ， 解 决 白色 模糊 边框 问题 
left : -10%; 
width: 120%; 
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height: 120%; 

-webkit-filter: blur (5px);// 高 斯 模糊 的 滤 镜 效果 ， 兼 容 多 浏览 器 
-oz-Tlter: blurlSpx)? 

-ms-filter: blur (Spx)s 

ltars Dar(SpwRi}z 


8.6 精致 0.5 px 细 线 的 实现 


移动 端 HTML 文件 中 通常 需要 正确 设置 viewport, <meta name="viewport" content= 





















































"width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> 
定义 了 本 页 面 的 viewport 的 宽度 为 设备 宽度 ， 初 始 缩放 值 和 最 大 缩放 值 都 为 1， 并 禁止 了 用 户 缩 
放 。 理 解 了 viewport 的 设计 原理 会 使 得 移动 端 CSS 里 面 写 了 1 px， 实 际 App 中 看 起 来 比 1 px 粗 。 
所 以 当前 很 多 App 页 面 的 UI 设计 会 使 用 0.5 px 的 细 线 作为 分 割 线 或 边框 线 ， 以 使 画面 线条 显得 
加 细腻 、 精 致 。 












































IT 








































































































































































































































































































本 示例 采用 CSS 中 的 伪 类 +transform 方法 来 实现 0.5 px 细 线 ， 这 是 当前 各 种 开发 方 邑 
容 性 比较 好 的 一 种 实现 方案 。 实 现 方法 说 明 如 下 。 








































































































使 用 CSS 伪 类 :before 或 者 :after 来 模拟 一 个 仅 包 售 border 的 元 素 ， 然 后 使 用 transform 的 
scale 将 此 元 素 缩小 一 半 ， 即 实现 了 1 px 到 0.5 px 的 转变 。 这 里 要 求 原 设计 元 素 相对 定位 ， 伪 类 
创建 的 border 绝对 定位 。 
























































体 代 码 如 下 : 





/* 单 条 border 样 式 设置 */ 

-obj { /* 目标 元 素 */ 
position: relative; /* 相 对 定位 */ 
border:none; 

} 

/* 伪 类 元 素 ， 创 建 底部 细 线 */ 








.Obj:aftert{ 
content: ''; 
position: absolute; /* 绝 对 定位 */ 
bottom: 0; /* 设 置 位 置 */ 
background: #000; /* 设置 颜色 */ 
width: 100%; /* 设 置 宽 高 */ 


height: lpxs 

-webkit-transform: scaleY(0.5); /* 设 置 缩放 */ 
transform: scaleY (0.5); 
—webkit-transform-origin: 0 0; 
transform-o0rigins: 0 ds 


} 





/* 四 条 border 样 式 设置 */ 
.Scale-lpx{ 
position: relative; 
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margin-bottom: 20px; 
border:none; 


} 

.Scale-lpx:aftert{ 
Content : ''; 
position: absolute; 
top: 0 
left: 0; 


border: lpx solid #000; 
—webkit-box-sizing: border-box; 
box-sizing: border-box; 

width: 200%; 

height: 200%; 

-webkit-transform: scale (0.5); 
transform: scale(0.5); 
—webkit-transform-origin: left top; 
transform-origin: left top; 






































iOS8.0 以 上 版 本 支持 直接 设置 0.5 px 的 线 宽 ， 而 本 示例 所 述 方法 是 单纯 使 用 CSS 实现 了 
0.5 px 细 线 ， 其 优点 是 自动 兼容 不 需要 考虑 操作 系统 版 本 。 在 实际 的 开发 中 ， 可 以 通过 JavaScript 
来 判断 当前 系统 版 本 ， 针 对 不 同 的 手机 系统 版 本 使 用 不 同 的 CSS 样式 ， 可 实现 更 好 的 效果 搭配 。 












































































































































dl 









































/ 








8.7 小 结 


本 章 介绍 了 开发 App 一 些 特定 效果 的 常见 技巧 ， 但 好 的 创意 远 不 止 这 些 ， 限 于 篇 幅 我 们 也 
无 法 一 一 展示 。 任 何 酷 炫 功能 都 可 以 在 APICloud 平台 上 实现 ， 如 果 你 有 好 的 创意 或 实现 方法 欢 
迎 公开 到 APICloud 开发 者 社区 中 ， 让 更 多 人 开发 出 更 具 特 色 的 优质 App。 
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挖 据 API 潜力 











本 章 将 介绍 API 对 象 的 高 级 内 容 ， 读 者 可 以 通过 这 些 内 容 构建 用 户 体验 更 好 的 App。 
示例 1 巧妙 地 展示 了 如 何 使 用 Frame 的 系统 特性 ， 去 模拟 实现 一 些 功 能 组 件 ; 


示例 2 展示 了 UIScorllPicture 模块 的 另类 使 用 场景 ; 


示例 3 一 示例 5 展示 了 模块 在 复杂 逻辑 下 的 实现 方式 ; 


示例 6 详细 讲解 了 api.ajax 方法 在 实战 中 的 使 用 技巧 和 需要 注意 的 事项 。 理 解 此 示例 的 讲 
解 内 容 ， 对 以 后 的 项 目 开发 工作 帮助 很 大 。 


学 习 目 标 


(1) 使 用 Frame 模拟 实现 按钮 功能 、 窗 口 组 件 和 侧 滑 式 窗口 布局 。 
(2) 使 用 UIScrollPicture 模块 完成 引导 页 的 开发 。 








(3) 使 用 photoBrowser 模块 实现 自 定义 样式 的 图 片 浏 览 功 能 。 
(4) 使 用 UIInput 模块 实现 自 定义 搜索 界面 。 

(5) 使 用 UIChatBox 模块 实现 聊天 界面 。 

(6) 使 用 api.ajax 进行 接口 调用 。 
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9.1 深入 挖 据 Frame 的 各 种 应 用 场景 


APICloud App 应 用 的 页 面 是 由 Window+EFrame 方 式 构成 ， 通 常 认为 Frame 就 是 作为 
Window 的 一 个 子 页 面 存在 的 。 本 节 将 介绍 Frame 的 更 多 使 用 场景 。 本 示例 所 使 用 的 技术 难度 并 
不 高 ， 但 本 示例 使 用 的 方法 和 技巧 ， 在 Frame 的 相关 介绍 文档 中 并 没有 明确 的 提 及 和 说 明 。 










































































































































































































































































展示 的 是 使 用 这 种 





5 着 


换 一 种 思维 模式 ， 换 一 个 角度 ， 可 能 会 看 到 不 同 的 风景 。 本 示例 丰 
技巧 进行 发 的 思维 方式 。 























































































































生来 实现 不 同 效果 页 面 的 方法 。 





甸 具 体 列 举 几 种 利用 Frame 的 特 ' 






























































9.1.1 模拟 页 面 按钮 


在 APICloud App 中 ，UI 类 模块 的 显示 级 别 较 高 ， 一 般 的 DOM 元 素 无 法 覆盖 在 其 上 。 
通常 遇 到 需要 在 UI 类 模块 上 添加 按钮 功能 时 ， 都 使 用 UIButton 模块 来 实现 。 在 遇 到 一 些 
UIButton 模块 难以 实现 的 特殊 UI 样式 时 ， 就 可 以 利用 Frame 与 UI 模块 显示 层级 同 级 的 特性 : 
在 UI 类 模块 上， 使 用 api.openFrame () 方法 ， 创 建 一 个 Button 尺寸 的 Frame， 在 此 Frame 
使 用 HTML 元 素 实现 UI 设计 样式 的 按钮 ， 从 而 完成 Frame 版 本 的 Button 效果 。 






































































































































































































































































































































常见 使 用 场景 是 在 地 图 类 模块 上 实现 自 定 义 按 钮 ， 如 定位 按钮 、 放 大 和 缩小 按钮 等 。 















































在 打开 Frame 页面 后 ， 需 要 开发 者 要 自己 负责 Frame 页 面 的 显示 与 隐藏 。 因 为 Frame 页面 与 
其 他 Frame 及 UI 类 模块 之 间 没 有 关联 关系 ， 所 以 在 需要 按钮 与 模块 界面 一 起 显示 及 一 起 隐藏 的 
功能 逻辑 时 ， 要 开发 者 自己 封装 方法 完成 同步 显示 或 同步 隐藏 的 关联 。 本 书 第 8 章 的 8.3 节 也 对 
Frame 的 特性 和 使 用 做 了 相关 说 明 ， 可 以 关联 起 来 进行 学 习 。 



























































Frame 初始 化 后 是 无 法 跟随 页 面 滑动 的 ， 所 以 此 种 方法 不 适合 需要 按钮 跟随 页 面 滑动 的 场景 。 














9.1.2 模拟 窗口 组 件 


App 中 的 各 种 模 态 对 话 框 组 件 也 可 以 通过 frame 来 模拟 实现 ， 这 样 能 让 页 面 的 布局 变 得 
加 灵活 。 
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1. 实现 原理 
F 面 介绍 两 种 模拟 窗口 组 件 的 实用 方法 。 有 兴趣 的 开发 者 可 以 根据 本 例 展示 的 方法 ， 自 行 
模拟 实现 更 多 特性 的 窗口 组 件 。 









































































































































是 利用 CSS 动画 实现 窗口 组 件 的 滑 入 效果 。 
































另 是 利用 Frame 窗口 实用 特性 设置 窗口 背景 的 透明 度 ， 这 一 点 是 Window 窗口 无 法 达 
到 的 。 通 过 这 一 特性 可 以 模拟 出 页 面 庶 章 效果 ， 从 而 实现 当前 多 种 窗口 组 件 。 

















































































































2. 组 件 效 采 图 
下 面 列 出 了 几 种 窗口 组 件 的 效果 图 ， 实 现 的 技术 难度 并 不 高 。 由 于 篇 幅 所 限 ， 读 者 可 在 本 
书 的 GitHub 分 支 中 查看 本 示例 的 源码 。 








































































































。 模拟 Alert 弹 窗 ， 如 图 9-1 所 示 。 














alert 窗 口 


这 是 一 个 测试 alert 窗 口 ! 


确定 





图 9-1 








。 模拟 Confirm 弹 窗 ， 如 图 9-2 所 示 。 
。 模拟 Sheet 弹 窗 ,如 图 9-3 所 示 。 
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Confirm 选择 弹出 框 


APP 能 够 改变 世界 吗 ? 





图 9-2 g9—3 























补充 说 明 : 第 8 章 的 8.1 节 和 8.2 节 中 的 实例 就 是 两 个 特殊 效果 的 Sheet 弹 窗 。 








9.1.3 模拟 侧 清 窗口 


通过 Frame 和 CSS 动画 模拟 侧 滑 窗口 ， 效 果 如 图 9-4 所 示 。 





Sr 























根据 实际 场景 需要 ， 考 虑 是 否 屏 蔽 当前 Frame 所 在 的 Window 窗口 的 返回 功能 ， 如 Android 
的 物理 返回 键 功能 和 iOS 的 侧 滑 返回 功能 。 











































































































。 监听 并 拦截 Android 的 物理 返回 键 按键 事件 (keyback 事件 ) ， 定 义 一 个 空 回调 函数 即 可 ， 
代码 如 下 : 


api.addEventListener({ 
name: 'keyback'"' 
}:functionl(ret,err)t{ 
/* 留 空 ， 不 执行 任何 方法 */ 
1); 























。 禁止 iOS 的 侧 清 返 回 功能 ， 设 置 Frame 所 在 的 Window 窗口 的 侧 请 返回 属性 为 lse， 示 
例如 下 : 
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api.setWinAttz ({ 



















































































































































































定义 。 在 Frame 扣 


























的 启 
旬 梦 [=I 








3 和 禁用 。 















































slidBackEnabled: false // 禁 止 滑动 返回 
]}) 
个 人 资料 
个 人 空间 
我 喜欢 的 人 
关注 我 的 人 
退出 登陆 
图 9 一 4 
从 项 目 优化 角度 出 发 ， 以 上 两 个 方法 应 在 Frame 所 属 的 Window 窗 
和 关闭 两 个 生命 周期 事件 中 ， 使 用 api.execScript 远程 控制 该 功能 属 怡 
e。 Frame 弹 窗 出 现时 ， 拦 截 keyback 事件 和 禁止 侧 滑 返回 功能 。 
。 Frame 弹 窗 关闭 时 ， 取 消 拦 截 keyback 事件 和 禁止 侧 滑 返回 功能 。 
补充 说 明 : api.openSlidLayonut 方法 可 实现 侧 滑 抽 懂 式 布 
的 多 种 可 塑性 。 
































9.2 ”使 用 UISerollPicture 模块 开发 引导 页 














本 闻 将 介绍 如 何 使 

















] UIScrollPicture 模块 





发 引导 页 。 


局 ， 本 示例 仅 为 了 





展现 Frame 
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9.2.1 概述 


引导 页 (GuidePages) 现在 已 经 成 为 App 的 
方式 ， 本 例 使 用 UIScrollPicture 模块 进行 引导 页 的 
可 以 让 用 户 体验 到 与 原生 App 一 样 的 滑动 翻 页 效果 。 














国 | 


定 功 能 组 件 之 一 了 。 引 导 页 可 以 有 多 种 实现 
UIScrollPicture 原生 模块 为 引导 页 ， 
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UIScrollPicture 模块 通常 是 作为 轮 播 图 组 件 而 被 开发 出 来 的 。 本 例 作 为 实战 技巧 之 一 ， 希 户 
能 起 到 一 个 示范 作用 。 模 块 的 使 用 并 不 需要 局 限于 说 明文 档 中 的 功能 介绍 ， 开 发 者 完全 可 以 根 
据 自己 的 理解 ， 扩 展 和 丰富 原 有 功能 模块 或 功能 API。 








































































































































































































1. 分 解 引导 页 功能 点 
引导 页 在 App 第 一 次 启动 时 显示 ， 一般 由 几 张 全 屏 
入 App 主页 面 ， 由 此 归纳 出 下 面 的 功能 点 列表 : 





















































区 


片 组 成 。 用 户 滑 动 到 尾 页 时 ， 点 击 进 



































































































































。 引导 页 的 显示 判断 (通常 只 有 第 一 次 App 启动 时 才 显示 )， 
。 引导 页 的 内 容 图 片 展示 ; 

。 3 引导 页 的 滑动 切换 图 片 功能 ，; 

。 点 击 引 导 页 尾 页 进入 App 主页 面 。 








































































































2. 功能 点 实现 
下 面 将 讲解 引导 页 的 主要 实现 步骤 。 





























柑 汉 









































(1) 引导 页 的 显示 判断 。 引 导 页 在 第 一 次 启动 App 时 显示 ， 可 使 用 api.getPrefs 方法 
对 第 一 次 启动 进行 变量 标识 缓存 ， 以 后 每 次 启动 都 判断 该 标识 是 否 存在 ， 如 不 存在 ， 则 判断 该 
App 为 第 一 次 启动 。 代 码 如 下 : 


































































































// 程 序 启动 入 
apiready = function(){ 
// 引导 页 显示 判断 
Var isFirst = api.getPrefs({ 
key: 'isFirst', 





Sync: true, 

}); 

if (!isFirst) { // 第 一 次 启动 App, 启动 引导 页 面 
fnstartGuidePage(); 

} else { // 不 是 第 一 次 启动 App， 跳 转正 常 主页 面 
fnStartMainPage (); 


























}; 
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FL 


(2) 引导 页 的 内 容 图 片 展示 与 滑动 切换 图 片 。UIScrollPicture 模块 支持 多 张 本 地 或 网 络 图 片 
的 显示 ， 并 支持 手势 滑动 切换 图 片 。 只 要 将 UIScrollPicture 的 模块 尺寸 设置 为 全 屏 ， 就 实现 了 引 
导 页 的 主体 功能 。 













































































































































































(3) 点 击 引导 页 尾 页 启动 App 主页 面 。 引 导 页 滑动 到 尾 页 的 判断 可 以 通过 UIScrollPicture. 
open 方法 的 回调 calback 中 的 index 来 判断 ， 点 击 事件 可 以 写 在 callback 中 的 dick 事件 触发 逻辑 中 。 




























































































站 








瑟 



































需要 说 明 的 是 ， 一 般 引导 页 的 UI 设计 ， 在 尾 页 一 般 是 添加 一 个 按钮 ， 点 击 按钮 后 跳 转 到 
主页 面 。 因 为 模块 的 特殊 性 ， 一 般 的 DOM 元 素 是 无 法 存在 于 模块 UI 之 上 的 ， 所 以 可 以 添加 一 
个 UIButton 模块 ， 然 后 在 UIButton 模块 的 点 击 事件 中 写 入 跳 转 主页 面 逻辑 。 如 果 UI 设计 的 按 
钮 样式 特殊 ， 开 发 者 也 可 以 使 用 Frame 来 模拟 一 个 按钮 。 本 示例 使 用 UIButton 模块 来 实现 引导 
页 尾 页 的 按钮 点 击 跳 转 主页 面 功 能 。 


















































































































































dl 









































































































































核心 远 辑 都 写 在 fnStartGuidePage 方法 中 ， 具 体 代 码 如 下 : 





function fnstartGuidePage() { // 启动 显示 引导 页 
// 设 置 页 面 默 认 图 片 ; 
var tData = [ 
'widget://res/guidel.jpg', 
'widget://res/guide2.jpg', 
'widget://res/guide3.jpg', 
'widget://res/guide4.jpg', 
]; 
UIScrollPicture = api.require('UIScrollPicture'); 
UIScrollPicture.open({ 
rect: { 
其 3 和 7 
Y: 0, 
w: "auto'v 
h 


: "'auto'// 此 处 用 'auto' 是 为 了 动态 适 配 手 机 屏幕 变化 ， 如 部 分 手机 虚拟 键 的 显示 / 隐藏 地 切换 


























paths: tData, 


styles: { 
4ndicators 六 
align: 'center', 
olor "rqba(285728572857 0 A) Ty 
activeColor: '#FFFFFF'"' 
} 
} 
contentMode: 'scaleToFill', 





auto: false, // 禁 止 自动 滚动 
loop: false, // 禁止 循环 播放 
}, function(ret, err) { 
if (ret) { 
/* 
// 方 法 1 点击 末 页 任意 位 置 进 入 主页 面 
if('click' == ret .eventType){ 
if(ret.index==3){ 
// 关 闭 页面 ， 进 入 主页 面 
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fnStartMainPage () 


} 
二 




















// 方 法 2 ”点 击 末 页 按钮 进入 主页 面 〈 使 用 前 ， 需 在 控制 台 添加 UIButton 模块 ) 
// 设 计 思 路 : 添加 一 个 UIButton 模 块 ， 在 UIScrollPicture 页 面 滑动 到 末 页 时 显示 UIButton 
模块 ， 其 余 页 面 隐藏 按钮 模块 ， 在 按钮 模块 添加 点 事件 点 击 模块 进入 主页 面 


























// 添 加 末 页 点 击 进入 主页 面 方法 
if ('show' == ret.eventType) { 
UIScrollPicture.addEventListener({ 
Dame: 'scroll' 
}, function(ret, err) { 
if (ret.status) { 





if (ret.index == (tData.length - 1)) { 
// 显示 进入 按钮 
fnshowStartBtn(); 

} else { 
// 隐藏 进 入 按钮 


fnHideSstartBtn(); 





















































上 面 UIScrollPicture 模块 的 open 方法 中 rect 参数 的 高 度 h 使 用 'auto' 属性 ， 这 个 点 很 重要 。 
现在 Android 机 型 多 样 ， 部 分 手机 系统 在 屏幕 底部 存在 一 个 可 以 显示 或 隐藏 的 虚拟 按键 栏 ， 此 虚 
拟 键 栏 可 以 在 App 运行 的 过 程 中 随时 显示 或 隐藏 。 当 在 虚拟 键 栏 显示 或 隐藏 时 ， 会 动态 地 改变 
设备 屏幕 的 可 用 高 度 。 如 果 不 将 模块 的 rect 尺寸 设置 为 auto'， 则 模块 尺寸 不 会 跟随 窗口 的 


高 度 变 化 而 改变 ， 从 而 导致 出 现 空白 区 域 ， 产生 屏幕 适 配 Bug。 
























































































































































































































































































































































综 上 所 述 ， 为 了 适应 屏幕 的 动态 变化 需要 在 UI 类 模块 的 使 欧 谍 使 用 'auto' 属性 来 进行 


尺寸 定义 。 在 api .openFrame 方法 中 使 用 'auto' 或 margin 布局 来 定义 Frame 的 尺寸 。 
































nr 
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DA 


本 节 将 介绍 如 何 使 用 photoBrowser 模块 自 定义 图 片 浏览 功能 。 























dl 























9.3.1 概述 


发 应 用 的 过 程 中 ,很 多 地 方 会 使 用 到 图 片 浏 览 的 功能 。 切 换 图 片 、 通 过 手势 放大 缩小 图 
TI 


片 的 功能 几乎 是 统一 的 ， 这 样 的 功能 已 经 集成 在 photoBrowser 模块 中 。 然 而 图 片 浏览 界面 的 样 
式 却 是 多 种 多 样 的 。 那 么 应 该 怎样 基于 现 有 的 原生 模块 实现 不 同 的 界面 效果 呢 ?” 以 下 将 具体 
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解 怎样 实现 相应 的 需 





9.3.2 自 定 义 样式 图 片 浏览 堪 功 能 实现 步 又 












































































































































(1) 图 片 浏览 器 界面 效果 ， 如 图 9-5 所 示 。 
模块 库 (4/5) 
: 国 三 图 三 : 
:> 到 国 
图 9-5 
(2) 使 photoBrowser 模块 实现 基本 图 片 浏览 功能 。 的 photoBrowser 块 ， 设 置 图 片 路 




































































及 基本 样式 和 功能 。 详 











径 数 组 ,上 





// 打 开 photoBrowser 模 块 
function fnOpenPhotoBroswer() { 











可 参阅 模块 文档 。 





Var photoBrowser = api.require('photoBrowser'); 


photoBrowser.open ({ 












































images : fnBuildImages()，// 要 展示 的 图 片 路 径 数 组 
bgColor : '#000', // 设置 背景 色 

activeIndex : activeIndex // 设 置 当前 要 显示 的 图 片 的 索引 
}, function(ret, err) { 

if (ret.eventType == "show") {// 当 模块 打开 时 ， 打 


fnOopenHeader () ; 
} else if (ret.eventType == "change") 


fnSetTit1le (zet .inadaex) 


]) 7 





















































代码 如 下 : 


个 frame 做 标题 栏 





{// 当 切 换 浏 览 的 图 片 时 ， 改 变 标题 栏 Erame 中 显示 的 值 

























































































} 
姑 为 在 原生 模块 被 打开 时 ， 会 显示 在 当前 页 面 所 有 HTML 元 素 之 上 。 且 photoBrowser 模块 
是 一 个 全 屏 的 ， 不 可 设置 模块 的 大 小 。 所 以 如 果 需 要 在 模块 之 上 添加 自 定义 样式 的 界面 ， 则 需 
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通过 再 次 打 个 Frame 来 实现 。 



























































人 决 的 回调 事件 中 ， 监 听 show 以 及 change 等 事件 来 操作 Frame 
的 元 素 。 当 eventType 为 show 时 ， 表 示 模 块 已 经 打开 ， 此 时 可 以 通过 打 个 Frame 来 展示 
在 模块 之 上 。 当 eventType 为 change 时 ， 可 以 通过 页 面 间 通讯 来 实现 对 Frame 中 元 素 的 控 肖 


: 题 。 代 码 如 下 : 





然后 可 以 在 photoBrowser 模 
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的 Frame 并 且 设 置 
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tk 


























(3) 显示 以 及 操作 自 定义 界面 。 使 外 的 代码 创建 









































// 打 个 frame 做 标题 栏 
function fnOpenHeader() { 
api.openFrame ({ 





name : 'show_picture_header'，// 设 置 frame 的 别名 
url : 'html/show picture header.html', 
rect : { 

y: 0, 


h : 65 // 设 置 标 题 栏 的 高 度 


}, 
pageParam : { // 向 打开 的 frame 中 传 参数 
PictureName : picturesName [activeIndex], 








PictureSum : 5, 
activeIndex : activeIndex 


3 
} 





// 页面 间 通 讯 ， 改 变 标题 栏 中 显示 的 值 
function fnSsetTitle(index) { 
api.execScript ({ 








frameName : 'show_picture_header'，//frame 的 别名 ， 与 openFrame 中 的 name 参 数 相对 应 
script : 'fnSsetTitle("' + picturesName[index] + '",' + index + ');' // 执 行 frame 中 名 
为 fnsetTitle 的 方法 


}); 
} 
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(4) 在 Frame 中 接收 参数 ， 并 编写 被 模块 界面 调用 的 方法 。 接 收 到 参数 后 通过 下 面 的 代码 






























































// 从 上 一 个 界面 接收 参数 ， 并 设置 标题 栏 中 的 值 

funcetion fnInit (yk 
pictureSum = api.pageParam.pictureSum; 
Var activeIndex = api.pageParam.activeIndex; 
fnSetTitle(api.pageParam.pictureName, activeIndex, pictureSum); 


} 





// 设置 标题 栏 中 的 值 
function fnSetTitle(title, index) { 












































$api.byId("pic name") .innerHTML = title + "(" + (index + 1) + "/" + pictureSum + "™)"; 
} 
当 遇 到 无 法 通过 模块 完全 实现 的 界面 效果 时 ， 可 以 通过 模块 与 Frame 结合 的 方式 来 解决 。 
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此 至 可 以 打开 多 个 Fame， 并 设置 不 同 的 位 置 及 大 小 来 实现 悬浮 在 模块 之 上 的 按钮 等 功能 。 
过 api.execSscript () 等 方法 来 实现 模块 与 Frame 之 间 的 通讯 。 
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9.4 使 用 UIInput 模块 实现 自 定 义 搜索 界面 


本 节 将 介绍 如 何 使 用 UIInput 模块 实现 自 定义 搜索 界面 。 




































































9.4.1 概述 
输入 框 的 功能 使 用 input 标签 就 可 以 很 简单 地 实现 了 。 但 是 当 产品 设计 要 求 通过 点 击 输入 法 
下 角 自 带 的 “搜索 ”“ 下 一 项 “发 送 “ 完 成 ”等 按钮 来 进行 下 一 步 操 作 的 时 候 ， 应 该 怎样 实现 呢 ? 








































































































































































































这 种 场景 下 就 需要 用 到 原生 的 UIInput 模块 来 实现 该 功能 。 以 下 将 具体 讲解 如 何 使 用 
UIInput 的 一 些 特殊 功能 。 























9.4.2 自 定 义 搜索 界面 实现 步 又 


(1) 前 端 代码 实现 基本 界面 效果 ， 如 图 9-6 所 示 。 
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9-6 





























下 进行 占 位 ， 然 后 根据 占 位 元 素 的 














通过 HTML 元 素 对 输入 机 
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(2) 使 用 UIInput 模块 实现 输入 
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位 置 确 定 UIInput 的 rect 参数 ， 从 而 控 





市 UImput 输入 框 的 位 置 和 大 小 。 详 细 内 容 可 参阅 相关 文档 。 











function fnopenUIInPut () { 
var UIInput = api.require('UIInput'); 
UIInput .open ({ 
Tect $ 1 

x : 60,//x 坐 标 是 back 按 钮 的 宽度 加 上 border-radius 

y : $api.offset ($api.byId("input_div")).t,//y 坐标 与 input_div 相 同 

w : $api.offset ($api.byId("input_qdiv")).w - 30,// 宽度 要 减 去 border-radius*2 

h : 30// 高 度 与 input_div 相 同 











} 

styles : { 
bgColor : '#EEE',// 设 置 输入 框 背景 色 与 input_qdiv 相 同 
size : 14, 





olor s #0007, 
placeholder : { 
Solo < "#6ee" 


} 
}, 
keyboardType : 'search',// 输 入 框 获取 焦点 时 ， 弹 出 的 键盘 类 型 
autoFocus : false, 
placeholder : ' 输 入 关键 词 '// 输 入 框 的 占 位 提示 文本 


}， function(ret) 1{ 




















if (ret.eventType == 'show') {// 当 UIInput 打 开 的 时 候 ， 也 同时 显示 搜索 历史 
getSearchHistory(); 
}) else if (ret.eventType == 'search') {// 当 点 击 输入 法 的 搜索 按钮 和 时， 进行 搜索 操作 


fnOonsearchClick (); 





























JavaScript 代码 中 的 keyboardType 参数 是 关键 。keboardType 可 以 设置 弹出 的 键盘 类 型 ， 也 
就 是 指定 系统 输入 法 右 下 角 自 市 的 “搜索 ” “下 一 项 ”“ 发送 ”“ 完 成 ”等 按钮 。 同 时 UIInput 模 
块 可 以 通过 回调 中 的 ret.eventType 来 监听 这 些 按钮 的 点 击 事件 ， 从 而 实现 相应 的 后 续 操 作 。 
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maxRows 参 数 取 值 大 于 1 时 ( 多 行 显示 时 )， 不 触发 search 事件 回调 。 所 以 maxRows 参 
数 在 显示 多 行 时 ， 无 法 实现 该 功能 。 















































(3) 监听 搜索 事件 进行 搜索 。 在 输入 机 
输入 框 的 值 并 进行 搜索 操作 。 




















TH 


输入 完毕 ， 点 击 搜索 输入 法 的 搜索 按钮 时 ， 获 取 






























































// 获 取 输 入 框 的 值 并 进行 搜索 操作 
function fnonSearchClick() { 
Var UIInput = api.require('UIInput'); 
UIInput .value (function (ret，err) {// 调 用 UIInput 模块 的 接口 获取 输入 框 中 的 值 






































if (ret) 
Var SearchStr = ret.msg; 
if (searchstr != '') { 


fnSearch (searchStr);// 执 行 搜索 操作 
fnSaveStorage (searchStr);// 存 储 搜索 记录 
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} 
} 
}); 
} 
(4) 实现 存储 记录 功能 。 
// 存储 搜索 记录 
function fnSaveStorage (searchstr) { 
var searchHistory = $api.getStorage('searchHistory');// 从 storage 获 取 搜 索 记 录 
if (searchHistory) { 
if (searchHistory.length > 4) {// 限制 搜索 历史 数目 
searchHistory.splice(0，1);// 如 果 超 出 数目 则 删除 最 早 存储 的 元 素 
} 
} else { 
searchHistory = []; 
} 
if (fnIsExist (searchHistory, searchStr)) {// 判 断 当 前 搜索 的 值 是 否 在 历史 记录 中 
return; 
} 
searchHistory.push (searchSstr);// 将 新 的 搜索 记录 存储 
$api.setStorage('searchHistory', searchHistory); 
} 
// 判 断 当前 搜索 的 值 是 否 在 历史 记录 中 
function fnIsExist (searchHistory, searchstr) { 
if (searchHistory && searchHistory.length > 0) { 
for (var i = 0; i < searchHistory.length; i++) { 
if (searchHistory[i] == searchstr) { 
return true; 
} 
} 
} 
return false; 
} 
// 从 storage 中 清除 搜索 历史 
function fnClearHistory() { 
Sapi.rmStorage('searchHistory'); 
} 
当 遇 到 前 端 代码 无 法 实现 的 产品 需求 的 功能 时 ， 可 以 在 官方 网 站 的 模块 库 中 搜索 ， 查 看 是 
否 有 满足 需求 的 模块 ， 这 样 不 仅 可 以 解决 需求 问题 ， 还 可 以 提高 工作 效率 。 
A a 
9.5 使 用 UIChatBox 模块 实现 聊天 界面 
本 节 将 介绍 如 何 使 用 UIChatBox 模块 实现 聊天 界面 。 
移动 应 即时 通讯 的 功能 是 经 常 被 用 到 的 。 如 果 只 是 使 用 前 端 代码 编写 界面 的 话 ， 很 
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难 实现 良好 的 体验 效果 。 那 么 使 用 UIChatBox 模块 来 实现 聊天 输入 框 的 功能 是 一 个 很 不 错 的 选 
择 。UIChatBox 模块 几乎 包含 了 所 有 聊天 时 可 能 用 到 的 功能 与 界面 。 以 下 将 详细 讲解 如 何 使 
UIChatBox 模块 来 实现 聊天 界面 。 
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9.5.2 UIChatBox 模块 实现 聊天 界面 实现 步骤 


(1) 前 端 代码 以 及 模块 实现 基本 界面 效果 ， 如 图 9-7 所 示 。 
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聊天 界面 











9—7 












































(2) 打开 聊天 内 容 界 二 于 显示 聊天 内 容 ， 代 码 如 下 。 聊 天 输入 框 模块 则 在 Window 















































打开 。 





function openFrame() { 
api.openFrame ({ 


name : 'chat_frame', 
url : 'html/chat_frame.html', 
reet. + { 


y : $api.dom('header') .offsetHeight， 
h : api.winHeight - $api.dom('header') .offsetHeight 
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| 





}, 
pageParam : api.pageParam 
2 






































(3) 使 用 UIChatBox 模块 实现 输入 框 ， 根据 官网 的 模块 文档 ， 





沪 





模块 参数 ， 在 Window 
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打开 模块 ， 并 在 回调 中 添加 各 种 事 伯 




















function fnOopenUIChatBox() { 
Var UIChatBox = api.require('UIChatBox'); 
UIChatBox.open({ 


emotionPath : 'widget://res/emotion', 
texts : { 
recordBtn : { 
normalTitle : ' 按 住 说 话 '， 
activeTitle : ' 松 开 结束 ' 





styles : { 

emotionBtn : { 

’ 

extrasBtn : 1{ 

normalImg : 'widget://image/chat/chat_add.png' 
’ 

inputBar : { 

borderColor : '#dddddd', 

bgColor : '#FFF'"' 

’ 

speechBtn : { 

normalImg : ‘'widget://image/chat/chat_voice.png' 





’ 
recordBtn : { 
normalBg : 'widget://image/chat/chat record.png', 
activeBg : 'widget://image/chat/chat record.png', 
color : #6d6d69"., 
size : 13 
}, 
keyboardBtn : { 
}, 
}, 





extras 
titleSize : 13, 
titleColor : '#888888', 
Ben * [{ 
title :' 照 片 '， 
normalImg : 'widget://image/chat/chat_ablum.png' 
}，{ 
title : "拍摄 '， 
normalImg : 'widget://image/chat/chat_camera.png' 
}] 
} 
}»: function(ret, err) { 
if (ret.eventType == "send") { 
} else if (ret.eventType == "show") { 


F 的 监听 ， 代 码 如 下 。 更 多 信息 请 参阅 模块 文档 。 




















inputListener();// 添 加 输入 框 高 度 变化 事件 监听 ， 用 于 改变 聊天 内 容 界 面 的 高 度 
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addchatRecordLis () ;// 录 音 按 钮 事件 监听 





} else if (ret.eventType == "clickExtras") { 
// 监听 附加 按钮 监听 
if (ret.index == 0) { 
clickSelectPicture ("album"); 
} else { 


clickSelectPicture ("camera"); 
























































(4) 监听 输入 框 高 度 变化 事件 来 改变 聊天 内 容 界面 高 度 。 根 据 文 档 基 本 能 实现 模块 的 功能 ， 































































































































































































但 是 开发 过 程 中 需要 实现 当 聊 天 输入 框 高 度 变化 时 和 键盘 弹出 与 收 起 时 ， 聊 天 内 容 界 面 不 被 
块 遮盖 ， 并 可 滚动 到 底部 。 以 下 主要 讲解 这 个 功能 的 实现 ， 也 是 使 用 UIChatBox 模块 开发 聊 
界面 的 唯 难点 


























人 Wo 























调用 UIChatBox 的 addEventListener 接 
move 是 监听 键盘 弹出 和 收 

















分 别 监 听 inputBar 的 move 和 change 
时 高 度 的 变化 ，change 是 监听 输入 框 的 高 度 变 化 。 


hl 

区 
让 
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ke 


















































根据 计算 好 的 高 度 来 重新 设置 聊天 内 容 界 F 


























Tr 














的 高 度 。 代 码 如 下 : 


function inputListener () { 








Var UIChatBox = api.require('UIChatBox'); 
UIChatBox.addEventListener({ 
target : 'inputBar', 
name :; 'move' 
, function(ret, err) { 
fnChangeFrameHeight (ret); 
) 
UIChatBox.addEventListener({ 
target : 'inputBar', 
name : "change' 
function(ret, err) { 
fnChangeFrameHeight (ret); 
); 





function fnChangeFrameHeight (ret){ 
if (ret) { 
hl = ret.inputBarHeight; 
h2 = ret.panelHeight; 
Var systemType = api.systemType; 


if (systemType == "ios") { 
resetFrameAttr (hl + h2); 
}else { 


resetFrameAttr(hl + h2 + 15) 7 

























































































看 新 设置 聊天 内 容 界 面 高 度 ， 并 将 消息 滚动 到 最 底部 ， 代 码 如 下 : 
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function resetFrameAttr(h) { 
api.setFrameAttr({ 


name : 'chat_frame', 
Foct A 攻 

和 人 人 

A 


hs 
} 
3 
api.execScript ({ 
frameName : 
Seript 3 
}); 


'chat_frame', 


$api.dom('header') .offsetHeight, 
api.winHeight - $api.dom('header') .offsetHeight ~ h + 10 


'scrollToBottom();" 


9.6 使 用 api.ajax 进行 网 络 请 求 














api.ajax 是 APICloud 

















生 网 络 通 信和 能 力 封装 的 Ajax 功能 。 


于 系统 原委 

























































































































































































































































































跟 普 通 JavaScript 框 
架 中 的 Ajax 相 比 ， 多 了 跨 域 的 功能 ， 而 且 在 代码 加 密 之 后 ， 不 会 出 现 某 些 兼容 性 问题 。 
api .ajax 简单 好 但 是 在 实际 调用 接口 的 过 程 中 ， 可 能 会 遇 到 一 些 问题 ， 比 如 接口 要 求 
上 报 的 数据 是 RON、array、number 等 类 型 ， 结 果 传 上 去 的 都 是 string 类 型 的 数据 。 
在 需要 传递 JSON 或 array 的 参数 时 可 以 选择 放 在 data values 参数 中 。 示 例如 下 : 
api.ajax({ 
Urls "https//192.16851.1/test"; 
method: 'post', 
data: { 
Values: { 
bagB. as. "Bt “erl 
} 
} 
}, function(ret, err)f{ 
//your codes 
]) 7 
当 方 法 改 成 get 类 型 之 后 ， 要 把 参数 放 在 url 里 ， 而 不 是 放 在 data 中 ， 需 要 进行 如 下 处 理 : 
api.ajax({ 
Urls "httpy /192.168,1.1/test?tagsse "tIS0N ,atringify([l "ar “Bry erlYy 
method: 'get'" 
}, function(ret, err){ 
//your codes 
}); 
把 需要 传 的 参数 从 object 转 为 字符 串 就 可 以 了 。 另 外 ， 在 上 传 文件 的 时 候 ， 也 可 能 会 遇 到 


以 下 这 个 问题 : 
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api.ajax({ 
url: http://192.168.1.1/upload', 
method: 'post', 
report: 'true'，// 在 上 传 文件 的 时 候 ,report 设置 为 true， 会 有 实时 返回 上 传 文件 进度 的 功能 
data: { 
values: { 
name: 'test'" 
}, 
files: { 
file: "fs://a.gif' 
由 
} 
}, function(ret, err) { 
if (ret) { 
/大 
#{ 
* progress: 100，// 上 传 进度 ,0.00-100.00 
Np status: ''，// 上 传 状态 ， 数字 类 型 。(0 : 上 传 中 .1 : 上 传 完 成 .2 : 上 传 失败 ) 
* body: '， // 上 传 完成 时 ， 服 务 器 返回 的 数据 
二 和 
wy 
由 
]) 7 
当 监听 到 上 传 进 度 ret.progress 是 100 后 ， 就 会 进入 下 一 个 步骤 。 例 如 上 传 完 图 片 ， 从 body 
获取 远程 图 片 地 址 ， 然 后 将 图 片 展示 在 页 面 里 。 但 实际 上 这 样 不 是 真正 的 上 传 完成 ，progress 
等 于 100 的 时 候 ，body 里 可 能 不 会 返回 上 传 完成 后 的 远程 图 片 地 址 。 上 传 完成 需要 判断 status 值 
是 否 为 1， 当 ret.status 等 于 1 时 body 中 才 会 有 返回 数据 。 所 以 ， 需 要 根据 status 的 状态 来 确认 是 
否 上 传 完成 。 





api.ajax({ 























Urls http://192.168,1.1/upload's 
method: 'post', 
report: 'true'，// 在 上 传 文件 的 时 候 ,report 设置 为 true， 会 有 实时 返回 上 传 文件 进度 的 功能 
data: { 
values: { 
name: 'test'" 
}, 
files: { 
Tles. Ea/ /asyiE" 
} 
} 
}, function(ret, err) { 
if (ret) { 
if (ret.status == 1) { 
:/ todos 
} 
/大 
人 
* progress: 100，// 上 传 进度 ,0.00-100.00 
* status: ''，// 上 传 状态 ， 数 字 类 型 (0 : 上 传 中 、1 : 上 传 完成 .2 : 上 传 失 败 ) 
* body: '， // 上 传 完成 时 ， 服 务 器 返回 的 数据 
让 
SS 
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通常 开发 者 会 对 api.ajax 进行 封装 ， 这 样 很 容易 出 现 一 个 问题 。 在 封装 成 方法 的 时 候 ， 可 能 
会 将 body、values 和 fles 一 起 封装 进去 ， 这 样 就 会 违反 接口 文档 中 的 约定 ， 造 成 接口 调用 不 通 。 
APICloud 中 的 api.ajax 的 接口 文档 ， 对 data 字段 的 描述 如 下 。 


















































































































































Im 


时 


| 


描述 : (可 选项 ) POST 数据 ，method 为 get 时 不 传 。 以 下 字段 除了 values 和 fies 可 以 同 
使 用 ， 其 他 参数 都 不 能 同时 使 用 。 
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Hl 
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所 以 在 封装 ajax 请 求 的 时 候 ， 建 议 只 使 用 values， 不 使 用 body。 代 码 如 下 : 











function fnConvertParam(param) { 
// 简单 的 对 get 类 型 的 网 络 请 求 参数 的 序列 化 


[2 
’ 


























Var _param = 
for (var key in param) { 





if (typeof param[key] == 'function') { 
continue; 
} 
if (_param == '') { 
_Pparam += ('?' + key + '=' + param[key]); 
} else { 
_param += ('&' + key + '=' + param[key]); 


} 
return _param; 

}; 

function ajaxRequest (url, options, callBack) { 
// options method, values, files 


var method = options.method || 'get'; 
var values = options.values; 

Var files = options.files; 

var host = 'https://www.apicloud.com'; 
// 服务 器 地 址 

var account = { 


Authorization: "3APIaWg7BNbH2nIy4AecVfDfwrqgUaonjaEDIs0in6EuDZP9PA9J1f1hq32N7VKUGY"' 
}; 
// 保存 在 App 端 的 accessToken 


var data = {}; 

// api.ajax 中 的 参数 data 

if (method.toLowerCase() == 'get') { 
url += fnConvertParam(values); 























values = {}; 
// 如 果 是 get 类 型 的 接口 ， 需 要 把 values 里 的 内 容 清 空 
} else { 


data.values = values; 


if (files) { 
data.files = files; 


// 传 入 了 files 参 数 ， 说 明 是 上 传 文件 


Var ajaxJson = { 
Urls: hoat + Url 
method: method, 
cache: true, 
timeout: 20, 
data: data, 


如 


9.7 


本 章 的 示例 代码 主 3 
复杂 的 功能 业务 逻辑 ， 其 中 部 分 示例 代码 使 用 的 方法 技巧 属于 另辟蹊径 ， 展 示 了 程 请 
E。APICloud 提供 了 丰富 的 API 和 海量 的 模块 供 开发 者 选择 ， 这 些 模 块 同 样 具有 高 度 的 


样 ， 


[ES 
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ajaxdJson 是 发 送 请 求 所 要 传 入 的 数据 
if (account) { 
ajaxJson.headers = account; 
} 
if (!files) { 
if (ajaxJson.headers) { 
ajaxJson.headers['Content-Type'] = 'application/json'; 
} else { 
ajaxJson.headers = { 
'Content-Type': 'application/json' 
}; 
} 
} else { 
ajaxJson.report = true; 
// 将 report 设 置 为 true， 使 返回 上 传 进度 生效 ， 可 以 通过 获取 ret .progress 得 到 上 传 的 进度 
delete ajaxJson.headers; 
// 上 传 文件 可 能 用 不 到 认证 ， 此 时 可 以 把 请 求 中 的 headers 删 掉 


api.ajax(ajaxJson, functionl(ret, err) 


}); 


if (err) { 








ifl(lerr && (err.statusCode == err.statusCode == 502) ){ 
// 对 网 络 链接 错误 的 统一 错误 处 理 ， 可 以 不 使 用 这 段 代 码 
api.toast ({ 
msg: ' 与 服务 器 断 开 连接 '， 
location: 'middqle' 


]) 7 




















} 
} 
callBack && callBack (ret, err); 


// 将 数据 传 给 传 入 的 回调 函数 并 执行 















































必须 使 用 body， 注意 避免 body 与 values、files 同时 出 
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小 结 
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下 了 如 何 使 用 APICloud 的 API 方法 及 APICloud 模块 去 实现 一 些 更 

































































































































































义 支 持 ， 
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ee 




















可 以 灵活 运用 、 深 入 挖 握 这 些 APICloud 模块 和 API 对 象 的 应 
































出 功能 强大 而 且 与 众 不 同 的 App。 
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场景 ， 从 而 开发 











第 10 章 


超级 实用 技巧 











主要 内 容 
本 章 将 向 读者 介绍 一 些 开发 中 常用 的 功能 和 技巧 ,这 些 技巧 涉及 应 用 开发 的 方方面面 。 
示例 1 讲解 了 屏幕 动态 适 配 的 方法 ， 是 开发 App 必须 具备 要 掌握 的 技能 之 一 ; 


示例 2、 示 例 7、 示 例 9 一 示例 11 具体 讲解 了 一 些 常 见 的 业务 需求 的 实现 方法 ， 重 点 理解 
其 功能 实现 时 的 相关 逻辑 处 理 ; 

示例 3 讲解 了 打开 Web 页 面 的 处 理 、 示 例 4 介绍 了 App 的 换 皮 肤 功 能 、 示 例 5 讲解 了 如 
何 实现 语言 国际 化 、 示 例 6 介绍 如 何 唤起 其 他 App， 这 些 示 例 都 是 很 实用 的 实战 功能 技巧 ， 在 
App 开发 中 会 经 常用 到 ; 

示例 8 讲解 了 APICloud 运行 原理 方面 的 相关 知识 ， 了 解 并 掌握 这 些 知识 会 对 优化 App 功 
能 体验 有 很 大 帮助 。 


学 习 目 标 
(1) 页 面 动态 适 配 有 虚拟 按键 栏 的 Android 手机 。 


(2) 实现 获取 手机 验证 码 的 功能 。 
(3) 打开 一 个 外 部 链接 作为 新 页 面 ， 并 设置 样式 以 及 事件 监听 。 


(4) 实现 App 的 皮肤 样式 切换 功能 。 (5) 实现 App 多 语言 版 本 切换 功能 。 
(6) 调用 任意 App。 (7) 快速 开发 数据 表格 。 
(8) apiready 与 window.onload 的 平衡 使 用 。 (9) 在 地 图 上 添加 自 定义 按钮 。 


(10) 如 何 获取 城市 的 地 铁 线路 列表 。 (11) 实现 极光 推送 。 
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10.1 如 何 让 页 面 动态 适 配 有 虚拟 按键 栏 的 Android 村 





























10.1 如 何 让 页 面 动态 适 配 有 虚拟 按键 栏 的 Android 手机 




































































































































































为 达到 屏幕 的 最 大 利用 率 ， 很 多 Android 手机 厂商 在 生产 手机 时 ， 会 将 手机 物理 按键 栏 
(Back 键 和 Home 键 等 操作 栏 ) 取消， 将 其 通过 虚拟 的 方式 嵌入 到 手机 的 屏幕 中 。 我 们 称 之 为 庶 
拟 按 键 栏 ， 该 按键 栏 可 以 随时 显示 或 者 收 起 。 正 常 状态 下 如 图 10-1 所 示 。 

下 的 问题 ， 如 图 10-2 所 示 。 


会 出 现 如 


之 后 点 击 左下 角 的 收 起 按钮 ， 会 虽 
[Pe 01545] Eg 
云 API 


云 API 






































云 API 


云 API 




















云 AP| 端 API 开发 
图 10-2 
的 Footer 部 分 下 沉 ， 而 Frame 


图 10-1 
度 增 加 ， 页 面 

















































































































很 明显 ， 因 为 虚拟 按键 栏 收 起 ，Window 的 高 
的 高 度 是 固定 的 ， 这 样 就 会 出 现 图 10-2 中 的 间 题 ， 页 面 底部 多 出 了 一 条 空白 区 域 。 





























的 示例 代码 





// 这 是 文档 
api.openFrame ({ 
'page2', 


name: 
'./page2.html' 


入 站 业 汉 本 


rect: { 
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'auto', 
'auto' // 如 果 使 用 h 参 数 ， 就 会 出 现 上 面 的 问题 











DK x 














}, 
pageParam: { 
name: 'test' 
} 
); 














下 








针对 上 面 出 现 的 问题 ，APICloud 平台 的 适 配 机 制 是 在 rect 参数 中 ， 增 加 了 margin 系列 参数 
来 解决 虚拟 按键 栏 的 问题 ， 对 上 面 的 接口 进行 简单 的 修改 。 代 码 如 下 : 


A 













































































api.openFrame ({ 
name: 'page2', 


zl "./page2,.html'y 
Gt 间 

装 有 5 

y: 0, 


WE Uto rs 
marginBottom: '50' // 计算 出 来 的 footer 的 高 度 








这 样 ， 就 可 以 完美 解决 Android 虚拟 按键 栏 的 问题 。 
















































































iOS 也 可 能 出 现 类 似 的 问题 : 当 用 户 在 使 用 App 的 过 程 中 ， 如 果 来 了 一 个 电话 ， 这 时 会 在 
状态 栏 与 App 之 间 插 入 一 条 电话 的 状态 栏 ， 就 会 出 现 和 Android 虚拟 按键 栏 类 似 的 问题 。 我 们 
也 可 以 按照 以 上 思路 来 解决 这 个 问题 ， 即 使 用 margin 布局 来 动态 控制 Frame 的 位 置 高 度 。 示 例 
如 下 : 






















































































El 



































// 这 是 文档 中 的 示例 代码 
api.openFrame ({ 
name: 'page2', 


url:; './page2.html', 





Tot 
Or 
marginTop: 50，// 计算 出 来 的 header 的 高 度 
WwW? "AutoO, 
marginBottom: 50 // 计算 出 来 的 footer 的 高 度 





10.2 获取 手机 验证 码 功能 的 实现 


获取 手机 验证 码 ， 在 App 的 项 目 开 发 中 ， 几 乎 是 必需 的 功能 。 本 示例 是 从 实战 项 目 中 提炼 
的 相关 功能 代码 ， 示 范 如 何 获取 手机 验证 码 。 
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本 示例 实现 了 以 下 功能 点 : 











点 击 获取 验证 码 按钮 ， 显 示 倒 计时 数字 功能 ; 
。 输入 验证 码 错误 3 次 后 ， 显 示 图 形 校 验 码 。 
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本 示例 模拟 实战 项 目 ， 示 范 了 如 何 使 用 Data URI 方式 显示 图 片 。 实 项 ， 服 务 
请 求 获取 验证 码 的 API 时， 通常 会 返回 图 片 经 过 base64 编码 后 的 data 数据 作为 图 形 校 验 码 。 图 
校 验 码 的 存在 可 以 有 效 防止 恶意 脚本 的 执行 破坏 。 一 个 健壮 的 获取 手机 验证 码 功能 中 ， 图 天 
校 验 码 是 必 不 可 少 的 。 如 果 服 务 端 没 有 更 进一步 的 识别 机 制 ， 建 议 可 以 直接 显示 图 形 校 验 码 ， 
即 不 要 3 次 错误 后 再 显示 ， 以 免 被 恶意 脚本 利用 ， 造 成 损失 。 



















































































NS 













































































































































































































































































具体 的 开发 要 点 包括 以 下 几 点 。 

















| 
二 











点 击 获 取 验 证 码 按钮 ， 显 示 倒 计时 数字 的 功能 。 倒 计时 功能 使 用 setInterval0 方法 来 
实现 ，setInterval0 方法 可 按照 指定 的 周期 〈 以 毫秒 计 ) 来 调用 函数 或 计算 表达 式 。 
setInterval() 方法 会 不 停 地 调用 函数 ， 直 到 clearInterval( 方法 被 调用 或 窗口 被 关闭 。 示 例 
如 下 : 


















































































































































function getCode () { // 获 取 验 证 码 














if (timeCode !== 60) { // 倒计时 中 ， 屏 项 点 击 事件 
return 

} else { 
$api.dom('input [name="phone"] ') .blur () 





$api.dom('input [name="code"]') .blur() 
timeCode -= 1 
$api.text ($api.dom('.get-code')， timeCode + ' 秒 重 发 '); 
Var loopTime = setInterval (function(){ 
if (timeCode !== 0) { 
timeCode -= 1; // 计时 器 计数 -1 
$api.text ($api.dom('.get-code')， timeCode + ' 秒 重 发 '); 
getCode () 7 
} else { 
clearInterval (loopTime); // 计时 器 计数 为 0， 取 消 计时 器 
$api.text ($api.dom(' .get-code')，' 获 取 验 证 码 '); 
timeCode = 60; 


















































} 
}, 1000); 
4 
} 
e 使 用 Data URI 方式 显示 图 片 。Data URI Scheme 是 在 民 RFC2397 中 定义 的 ， 的 是 将 










































































一 些小 的 数据 ， 直 接 验 入 到 网 页 中 ， 从 而 不 用 再 从 外 部 文件 载 入 。 如 本 示例 中 的 img 
到 片 元 素 代码 。 在 如 下 的 Data URI 中 ，data 表示 取得 数据 的 协定 名 称 ，image/png 是 数 
据 类 型 名 称 ，base64 是 数据 的 编码 方法 ， 喜 号 后 面 就 是 这 个 image/png 文件 base64 编码 
后 的 数据 。 
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<img src="data:image/png;base64,iVBO... 代 码 省 略 .. .SuQmCc"> 


10.3 打开 一 个 外 部 链接 作为 新 的 页 面 ， 并 设置 样式 以 
及 事件 监听 








































































































































































































































































































一 款 移动 应 用 中 经 常 有 点 击 轮 播 图 进入 广告 展示 界面 的 场景 。 一 般 情 况 下 ， 这 样 的 广告 都 
是 根据 不 同 的 活动 随时 更 换 的 。 这 样 的 界面 就 不 能 硬 编码 在 应 用 中 ， 而 是 通过 # 个 外 部 链 
接 来 展示 不 同 的 广告 。 那 么 这 种 场景 应 该 怎样 实现 呢 ? 以 下 将 详细 讲解 如 何 打开 一 个 外 部 链接 
来 作为 页 面 展示 ， 设置 某 些 样式 以 及 各 种 事件 的 监听 。 

































































打开 外 部 链接 功能 实现 步 又 如 下 : 


























(1) 界面 效果 ， 如 图 10-3 所 示 。 

















APICloud APP 开 发 文档 





开发 工具 

工具 :; APICloud Studio2 

工具 : Sublime Text 插 件 

工具 ; Atom 插 件 

工具 ; Eclipse 插件 

工具 : WebStorm 揪 件 

Sublime APICloud 插 件 自 定义 代码 提示 说 明 
Atom APICloud 插 件 代码 提示 说 明 

WebStorm APlCloud 插 件 自 定义 代码 提示 说 明 
APICloud Studlo WIFI 真 机 同步 和 WIFI 赴 机 预览 使 用 说 明 
Sublime WIFI 真 机 同步 和 WiIFi 页 机 预览 使 用 说 明 


Eclipse APICloud 播 件 WiF 南 机 同步 和 WIFI 真 机 钉 鉴 便 同 








刘 预 览 全 





10-—3 


























(2) 使 用 api.openFrame 方法 打开 远程 链接 ， 代 码 如 下 : 














api.openFrame ({ 
name: 'remote_html',， // 设 置 frame 别 名 
url: 'https://www.apicloud.com/', 
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bounces: false, 

rect: { 
marginTop:44,// 与 屏幕 上 方 间距 
marginBottom:50// 与 屏幕 下 方 间距 








}, 
progress:1{// 设 置 进度 条 类 型 和 样式 
type: 'page', // 加 载 进 度 效果 类 型 ， 默 认 值 为 default， 取 值 范 围 为 Gefault |page, default 等 同 于 
//showProgress 参数 效 果 ; 为 page 时 ， 进 度 效果 为 仿 浏览 器 类 型 ， 固 定 在 页 面 的 顶部 
color:'#45C01R' //type 为 page 时 进度 条 的 颜色 ， 默认 值 为 #45C01A， 支 持 #FFF, #FFFFFF， 
//rgb(255,255,255),rgba(255,255,255,1.0) 等 格式 
} 
]} ) 






































































































































作为 界面 的 方式 打开 远程 链接 与 打开 普通 的 Frame 基本 相同 ， 但 是 url 可 以 直接 设置 为 远程 
链接 。 



































(3) 为 远程 链接 界面 设置 监听 事件 ， 代 码 如 下 : 



































// 监听 Android back 键 ， 回 退 历史 记录 
api.addEventListener({ 
name: 'keyback' 

function (ret,err){ 
GoToHisBack ();，; 











); 
// 为 名 为 remote_html 的 Frame 设置 事件 监听 
api.setFrameClient ({ 
frameName:'remote_html' //frame 别 名 ， 与 openFrame 中 的 name 相对 应 
v function (zet){ 
onFrameStateChange (zet) 
) 














// 监 听 frame 事 件 
function onFrameStateChange (zet) { 

if(0 == ret.state) {//frame 开 始 加 载 
var Url = ret Url 
console.log('frame loading start: ' + url); 
else if(1 == ret.state){//frame 加载 进度 发 生变 化 
Var p = ret.progress; 
console.log('frame loading: ' + p); 
else if(2 == ret.state){//frame 结 束 加 载 
Var url = ret.url; 
console.log('frame loading finish: ' + url); 
else if(3 == ret.state){//frame 标 题 发 生变 化 
$('title') .innerHTML = ret.title; 

















(4) 操作 远程 链接 HTML， 代 码 如 下 : 


// 历史 记录 后 退 
function GoToHisBack(){ 
api.historyBack({ 
frameName:"remote_html" //frame 别 名 ， 与 openFrame 中 的 name 相 对 应 
}, function (zet){ 
if(!ret.status){// 没 有 历史 记录 了 则 关闭 当前 窗口 
api.closeWin () ; 
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}); 
} 


// 历史 记录 前 进 
function GoToHisForward()t{ 
api.historyForward({ 
frameName:"remote_html" //frame 别 名 ， 与 openFrame 中 的 name 相对 应 
}); 
由 





// 刷 新 页 面 
function GoToRefresh(){ 
api.execScript ({ 
frameName: 'remote_html'，//frame 别 名 ， 与 openFrame 中 的 name 相对 应 
Seripts ‘location reload(}3}" 
1); 















































移动 应 用 中 会 有 更 换 皮 肤 的 应 用 场景 。 比 较 简 单 的 就 是 实现 日 间 模 式 与 夜间 模式 。 以 下 将 
详细 讲解 如 何 实 现 更 换 皮 肤 的 功能 。 


































































































更 换 皮 肤 功能 实现 步 又 如 下 : 












































(1) 准备 多 套 CSS 皮肤 样式 ， 以 下 面 两 种 CSS 主题 为 例 : 





























//black.css 

body { 
background: #000; 
Color: #FFF; 

} 


//wihte.css 

body { 
background: #FFF; 
color: #000; 

} 


























性 ， 用 于 页 面 初始 化 时 ， 为 











(2) 设置 默认 皮肤 的 CSS。 给 link 标签 添加 名 为 heme 的 id 
href 重新 赋值 。 示 例如 下 。 

















三 
Bu 

















<link id="theme" rel="stylesheet" type="text/css" href="../css/wihte.css" /> 








| 








(3) 页 面 加 载 时 ， 根 据 存储 的 皮肤 类 型 引入 不 同 的 CSS 样式 。 由 于 APICloud 引擎 的 实现 
机 和 制 ，window.onload 将 会 在 apiready 之 前 执行 ， 在 window.onload 里 初始 化 皮肤 ， 能 有 效 避 
免 更 换 皮 肤 时 闪 屏 的 问题 。 示 例如 下 : 
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window.onload = function() { 
fnInitBg(); 
}; 


function fnInitBg(} 1 
var theme = $api.getstorage('theme'); // 从 storage 中 取出 存储 的 皮肤 类 型 
Var oTheme = document .getElementById('theme'); 














if (theme == "white"){ // 重 新 为 id 为 theme 的 1ink 标 签 赋值 
oTheme.href = "../css/wihte.css"; 

}elsef{ 
oTheme.href = "../css/black.css"; 
































(4) 更 换 皮肤 类 型 ， 需 要 存储 将 要 使 用 的 皮肤 类 型 ， 并 重启 App。 














这 里 并 不 建议 通过 界面 间 通 信和 来 改变 已 经 被 打开 的 Window 的 皮肤 ， 那 样 会 出 现 改变 皮肤 
时 闪 屏 的 问题 。 


function fnChangeWihteTheme (){ 
$api.setStorage ("theme", 'white');// 存 储 将 要 使 用 的 皮肤 类 型 
api.rebootApp (); // 重启 app 

} 























function fnChangeBlackTheme (){ 
$api.setStorage ("theme", 'black'); 
api.rebootApp (); 

} 


10.5 实现 多 语言 切换 功能 


如 今 许多 App 会 同时 在 国内 国外 多 个 市 场 上 发 布 ， 这 时 就 需要 针对 不 同 语种 的 用 户 来 切换 
不 同 的 语言 模式 。 以 下 将 详细 讲解 如 何 实现 多 语言 切换 的 功能 。 











本 
Ht 













































































语言 切换 功能 实现 步骤 如 下 。 
































一 





(1) 准备 多 种 语言 对 应 的 JSON 数据 ， 写 到 JavaScript 中 ， 并 引入 到 界面 。 准 备 语言 数据 ， 
参照 如 下 代码 : 





















































<script type="text/javascript" src="script/lan.js"></script> 


//lan.js 

Var chLanJson = { 
"select_lan" : "选择 语言 "， 
mch" : "中 文 "， 
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wenw : 英文" 
Var enLanJson = { 
"select_lan" "select language", 
eT "Chinese", 
Tan 4 "English” 
其 中 每 一 个 JSON 为 一 种 语言 的 翻译 集合 。 在 不 同 语言 翻译 集合 JSON 中 ，key 是 相同 的 ， 
value 则 对 应 不 同 语言 的 翻译 。 
(2) 为 要 切换 语言 的 标签 设置 类 名 以 及 自 定 义 属 性 。 需 要 切换 语言 的 标签 统一 设置 class 
为 lan， 同 时 设置 自 定 义 属 性 set-1lan。set-1lan html 或 value 为 标签 要 设置 的 内 容 
例如 div 中 的 set-lan="html:ch" 的 意义 是 ， 该 标签 的 innerHTML 设置 为 chLanJson 或 
enLanJson 中 key 为 ch 所 对 应 的 值 ， 即 为 文 ” 或 “Chinese”。 代 码 如 下 : 

















<div class="lan" set-lan="html:ch" tapmode onclick="fnChangeCh()"></div> 
<div class="lan" set-lan="html:en" tapmode onclick="fnChangeEn()"></div> 


<input 


class="]lan" type="text" set-lan="value:en"/> 











(3) 页 


面 初 始 化 时 根 和 





IT 


居 存 储 的 语 




















onload 将 会 在 apiready 之 前 执行 ， 
闪 屏 的 问题 。 代 码 如 下 





window.onload = 
tnInitLarn(js 
}; 


function'(} 


{ 


function fnInitLan () 


{ 


Var all = $api.domAll(".lan") 


var lan 
Eb 


al 


(var i 


var el 
var attr 
if (attr) 
var attrs 
// 之 后 的 为 翻译 集合 中 的 key 
Var attrType 
Var lanval; 
if(lan == 'ch'){ 
lanVval 
}elset{ 
lanval 


[i]; 











» 

if (attrType == "html') 
$api.html (el, 
} else if 


$api.val (el, lanVal); 


$api.getSstorage ("lan"); 
Dy 1 ll longth; 1++) 


el.getAttripbutel(' 


et 


lanVval); 
(attrType == 'value') 














言 类 型 切换 语言 。 























于 APICloud 引擎 的 实现 机 制 ， 





window. 









































在 window.onload 里 初始 化 语言 ， 能 在 


// 获取 所 有 class 为 lan 的 元 素 
// 获取 存储 的 语言 类 型 
{ 





set-lan'); // 获 取 set-lan 属 性 


[= 





效 避 免 更 


换 语言 时 





// 解 析 set-lan 中 的 值 ， 





); 同 写 


attrs[0]; 


// 根 据 获取 到 的 key， 获 取 标签 要 设置 的 内 容 


chLanJsonlattrs[1 


]]; 


enLanJson[attrs[1]]; 


{// 根 据 获取 到 的 内 容 类 型 ， 为 标签 


{ 


前 的 为 标签 


设置 的 内 容 


设置 获取 到 的 内 容 


[ee 
类 型 ; EE 





(4) 切换 语言 类 型 





function fnchangech () 


$api.setStorage ("lan", 


api.rebootApp (); 


} 


function fnChangeEn () 


$api.setStorage ("lan", 


api.rebootApp (); 


} 


， 存 储 将 要 使 


{ 


{ 





























的 语言 类 型 ， 











'ch'); 


'en'); 


10.6 调用 任意 App 























在 移动 端 ，App 可 上 
或 者 其 他 App 发 出 的 
SS 配 by 件 ， FT 以 




















向 操作 系统 声明 
启动 本 App 的 动作 。 





















































成 从 一 个 App 调 





10.6 


重启 App。 代 码 如 下 : 


个 或 多 个 URL Scheme， 该 Scheme 


调用 任意 App 
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于 响应 浏览 器 
































URL Scheme 以 字符 串 


| 





























5 式 存 7 


a 

















男 一 个 App 的 行为 及 传 参数 据 的 载 


遵循 RFC1808 标准 ， 跟 常见 的 网 址 格式 一 样 ， 如 http://www.apicloud.com。 














10.6.1 URL Scheme 应 用 场景 

















App 在 被 调 起 后 可 ji 


























过 接收 约定 好 的 参数 进行 逻辑 处 到 















































转 到 指定 页 (商品 详情 、 























通知 、 广 告 页 等 ) ， 或 














个 典型 URL Scheme 格式 如 下 : 





market://details?id=com.tencent .mm 








常 注册 在 App 的 
体 。URL Scheme 








EE ， 以 实现 不 同 的 业务 逻辑 ， 比 如 跳 














该 URL Scheme 











于 打 








手机 上 已 安装 的 应 























和 








tencent.mm" 的 App 讨 





情 页 

















o 











10.6.2 URL Scheme 在 APICloud 中 的 应 用 














APICloud 平台 App 






































ES 


和 完整 的 URL Scheme 体系 ， 











执行 指定 动作 (例如 实现 支付 宝 的 订单 支付 )。 





跳 转 到 包 名 (BundleID) 为 "com. 

















App、 在 config 


























配 




















(1) 如 何在 HTML5 





URL Scheme 响应 来 

















济 











EE 
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过 持 通过 URL Scheme 于 
览 器 或 者 其 他 App 的 打开 动作 、 通 过 监听 打开 事件 获取 传 参 等 。 
过 URL Scheme 打开 App。 
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E， 需 要 通过 公开 资料 或 者 对 应 App 的 官方 说 明 ， 获 得 App 所 开放 的 URL Scheme。 





~ 
df 
了 





























se 


在 获取 到 URL Scheme 后 ，HTML5 网 页 可 通过 使 用 <a> 标签 ， 并 给 href 赋值 为 该 URL 
Scheme 的 方式 ， 执 行 打开 App 的 操作 。 示 例如 下 : 










































































<a href="market://details?id=com.tencent .mm" > 给 微 信 评 分 </a> 











Sw 


其 中 ，market 是 应 用 商店 的 Scheme，"com.tencentmm" 是 微 信 App 的 包 和 名 。 户 在 页 
面 上 点 击 “ 给 微 信 评分 ”时 ， 当 前 App 或 者 浏览 器 将 打开 手机 上 安装 的 应 用 商店 ， 比 如 Google 
Play、 小 米 应 用 商店 等 ， 并 自动 跳 转 到 微 信 App 在 该 应 用 商店 的 详情 页 面 ， 完 成 一 次 打开 应 
商店 的 操作 。 








































































































<| 

















































































































I 










































































使 用 <a> 标签 静态 编码 的 方式 打开 App 不 够 灵活 ， 在 此 可 以 通过 JavaScript 操作 DOM， 更 
新 页 面 url 的 方式 实现 灵活 控制 。 代 码 如 下 : 





















































// 使 用 div 布局 实现 任意 效果 按钮 
<div onclick="jumpToMarket ('qq')"> 给 QQ 评分 </div> 
<div onclick="jumpToMarket ('mm')"> 给 微 信 评分 </div> 




















//JavaScript 代码 
<script> 
function jumpToMarket (ident){ 
Var identifier = "''} 
if('gqq' == ident){ 
identifier = 'com.tencent.mobileqq'; 
}else if('mm' == ident){ 
identifier = 'com.tencent.mm'; 
}elsel{ 
alert (' 暂 不 支持 该 打开 App'); 
return; 
} 
window.location.href = "market://details?id=" + identifier; 
} 
<script> 





























(2) APICloud 应 用 如 何 响应 URL Scheme 打开 动作 。 












































在 config 中 进行 urlScheme 的 偏好 配置 ， 声 明 本 App 响应 的 URL Scheme 类 型 ， 可 配置 多 项 ， 






































<widget idq="A000000000001" version="0.0.1"> 
<name>App 发 从 0 到 1</name> 
<content src="index.html" /> 
<preference name="urlScheme" value="pomelo"/> 
</widget> 





























提交 config 代码 后 ， 云 编译 服务 器 将 自动 把 pomelo 值 分 别 更 新 到 Android 和 iOS 安装 包 的 











































































































主 配 置 文件 中 ,浏览 器 和 其 他 App 均 可 通过 "pomelo://" 的 URL Scheme 将 该 App 打开 。 





























(3) 如 何 获取 通过 URL Scheme 打开 Apb 的 传 参 。 


appintent 事件 或 
的 URL Scheme 了 


ls 


APICloud App 被 浏览 


Lh 

















api.appParam 























apiready = function(){ 
api.addEventListener({ 


name: 'appintent' 
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数 折 
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器 或 者 第 三 方 App 使 用 URL Scheme 方式 调用 时 ， 











获取 传 参 。 例 如 浏览 器 通过 pomelo://detail 

































































}, function(ret, err) { 
Var appParam = api.appParam; 
if(appParam && appParam.sid){ 
var sid = appParam.sid; 
Var type = appParam.type; 


//TODO 


} 
}); 


(4) 一 些 常 见 App 的 URL Scheme。 





百度 地 图 : paidumap:// 
微 信 : weixin:// 

手机 oo : mqq:// 

手机 淘宝 : taobao:// 

新 浪 微 博 : sinaweibo:// 
支付 宝 : alipay:// 
天 猫 App : tmall:// 





10.7 数据 表格 的 快速 开发 





表格 功能 在 商 


jh 
ah 





要 。 





























某 APICloud App， 可 以 在 代码 中 使 用 以 下 方式 获取 传 参 











































































































在 APICloud 应 用 中 可 以 使 用 如 下 两 种 方式 实现 数据 表格 功能 的 怕 











TH 
Hr 
































效率 。 但 缺点 是 模块 使 用 原生 语言 开发 完成 ， 页 面 架 构 布 局 已 固 人 


使 用 APICloud 模块 实现 数据 表格 的 开发 























可 以 通过 监听 











s?sid=123&type=book 
的 sid 和 type 值 : 

















App 的 业务 需求 中 会 被 经 常用 到 ， 学 会 表格 功能 开发 
































发 者 来 说 很 

















APICloud 模块 开发 的 优点 是 更 快速 、 实 现 更 简 
























































Ht 


















































































































































~ 
沪 








第 二 方 JavaScript 框 





















































使 用 第 三 方 JavaScript 相 


并 

















于 一 个 特殊 页 面 样式 的 表格 ， 需 要 重新 封装 模块 ， 自 定义 功能 稍 弱 。 
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RL 速 发 。 
， 具 备 与 原生 相同 的 用 户 体验 和 运行 
固定， 留 给 开发 者 的 调整 空间 
开架 实现 数据 表格 的 开发 。 
的 优点 是 给 发 的 肥 大 些 ， 二 可 以 己 定义 表格 





























92 名 10 超级 实用 技巧 


















































页 面 的 各 个 组 件 ， 实 现 更 丰富 的 页 面 效 果 。 缺 点 是 基于 浏览 器 引 敬 泻 染 页 面 ， 运 行 性 能 效率 和 


页 面 泻 染 速度 没有 原生 模块 好 。 





uj 
GCC 
























































































































































发 者 可 根据 业务 实际 需求 选择 二 者 其 一 进行 表格 的 开发 。 


10.7.1 使 用 APICloud 模块 实现 数据 表格 的 开发 


于 使 用 APICloud 模块 开发 表格 的 示例 代码 很 简单 ， 本 示例 仅 展示 开发 完成 后 的 运行 效果 
图 ， 具 体 代码 可 在 本 书 GitHub 分 文 上 下 载 获取 。 




















































































































1. 饼 状 图 开发 
进行 饼 状 图 开发 时 可 使 用 pieChart 模块 。 它 可 识别 手势 转动 饼 图 ， 旋 转动 画 结束 后 返回 特 
定位 置 的 数据 块 的 下 标 。 同 时 支持 开发 者 自 定义 数据 块 样式 ， 如 图 10-4 所 示 。 




















































































































































































































2. 柱状 图 开发 

进行 柱状 图 开发 时 可 使 用 UIBarChart 模块 。 它 可 自 定义 X 轴 、YY 轴 的 样式 以 及 柱子 的 个 数 
和 颜色 ， 如 图 10-5 所 示 。 

法 车 3:39 所 = 40 流 必 3:39 所 二 40 


全 班 成 绩 分 布 情况 一 班 6 次 模拟 考试 平均 成 绩 
































































































































一 周 访问 量 





柱状 图 折线 图 双 柱 状 图 饼 状 图 柱状 臣 折线 图 双 柱 状 图 








图 10-4 10 一 5 
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3. 折线 图 开发 


进行 折线 图 开发 时 可 使 用 UILineChart 模块 。 它 可 用 于 生成 折线 图 区 线 图 ) 视图 


多 条 折线 。 开 发 者 可 自 定 义 又 轴 、Y 轴 样 式 以 及 折线 的 个 数 和 颜色 ， 如 图 10-6 所 示 。 
4. 双 柱 状 图 开发 


进行 双 柱 状 图 开发 时 可 使 用 doubleBarChart 模块 。 它 可 自 定 义 X 轴 、Y 轴 样 式 以 及 柱子 的 
个 数 和 颜色 ， 如 图 10-7 所 示 。 




















































































































































































































































































































着 遇 3:39 


所 了 40 闭 员 3:39 


二 班 6 次 模拟 考试 平均 成 绩 两 班级 平均 成 绩 对 比 


ES 











饼 状 图 。 柱状 图 折线 双 柱 状 图 饼 状 图 。 ”柱状 图 。 折线 图 双 竹 状 国 
图 10-6 图 10-7 


10.7.2 使 用 第 三 方 JavaScript 框 架 实现 数据 表格 的 开发 


于 APICloud App 由 HIML5 代码 、 原 生 APICloud 模块 和 混合 演 染 引擎 共同 构成 ， 因 此 







































































































































































在 APICloud 开发 中 使 用 第 三 方 JavaScript 框架 是 完全 兼容 的 。 
当前 第 三 方 表格 框架 以 百度 的 ECharts 框架 最 为 常用 ， 实 际 使 
























































的 效果 也 很 不 错 。 另 外 阿 
里 的 G2 框架 也 可 以 用 于 开发 表格 功能 。 有 兴趣 的 读者 可 以 自行 下 载 使 
发 表格 的 实例 代码 ， 可 以 在 本 书 GitHub 分 文 上 下 载 查看 。 



























































于 使 用 ECharts 
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10.8 apiready 与 window .onload 的 平衡 使 用 


执行 ， 但 它们 的 执行 顺序 不 同 ， 分 别 
合 实现 不 同 的 功能 逻辑 ， 本 市 将 介绍 它们 的 区 别 和 应 用 实例 。 

















apiready 与 window.onload 事件 都 会 在 页 面 打 开 时 



















































































10.8.1 apiready 与 window.onload 区 别 


CSS、JavaScript、 图 像 等 资源 加 载 完 成 后 立即 发 生 ， 
件 棚 





使 
I 


abiready 与 window.onload 的 区 别 如 下 。 





























window.onload 事件 是 W3C 规范 中 定义 的 标准 DOM 事件 ， 该 事件 会 在 HTML 页 面 以 及 




































































浏览 器 引擎 主动 回调 。window.onload 


















































: 志 着 页 面 已 经 被 解析 为 完整 的 DOM 树 ， 外 部 CSS 和 JavaScript 引用 均 加 载 完毕 ， 可 以 





























EE 
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document.getElementById 等 标准 DOM 接口 进行 















































< 
还 











HTML 即将 开始 被 泻 染 到 设备 屏幕 。 





发 生 
的 网 页 代码 中 都 应 该 监听 此 事件 ， 并 在 此 事件 的 回调 
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本 用 法 : 





window.onload 的 





window.onload = function(){ 





始 


























document .getElementById('title') .innerHTML = 'Hello App'; 


} 


























定义 操作 。 当 收 到 window.onload 事件 时 ， 























apiready 事件 是 APICloud 定义 的 平台 事件 ， 该 事件 

















会 在 APICloud 运行 时 且 环 境 准 备 好 后 立 











即 






























































。apiready 事件 标志 着 APICloud 引擎 及 模块 API 已 经 ? 完毕 ， 每 个 Window 和 Frame 对 应 
























































































































































apiready 的 基本 用 法 : 








apiready = function() 1{ 
api.openFrame ({ 
name: 'frm main' 
url:'./frm main.html' 
}); 
api.addEventListener({ 
name: 'pause' 
}, function (zet， err){ 
console.1log(' 应 用 进入 后 台 '); 
}); 
} 
































window.onload 先 执行 ，apiready 后 执行 ， 之 间 间 隔 在 数 训 秒 内 。 














10.8.2 apiready 与 window.onload 的 使 用 时 机 























所 有 W3C 规范 下 的 HIML、CSS 和 JavaScript 标 ? 





DOM 操作 均 可 在 window.onload 克 























正确 调用 api 对 象 下 的 接口 和 扩展 模块 。 


调 
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[二 >L2 年 


后 进行 ， 当 需要 使 用 api 对 象 或 者 模块 时 ， 必 须 在 apiready 年 App 开发 过 程 中 ， 应 
该 根据 不 同 的 场景 ， 在 这 两 者 之 间 权 衡 使 用 ， 尽 可 能 的 减少 App 因 不 同 厂商、 不 同 硬件 以 及 系 
统 版 本 等 的 差异 引起 的 适 配 问题 ， 令 App 能 够 达到 更 好 的 运行 体验 。 





















































be 

sh 
| 

证 

oT 

be 
o 
二 
Im 





























































































































10.8.3 ”应 用 实例 


列举 了 3 个 使 用 apiready 或 window.onload 事件 的 实例 ， 除 此 之 外 还 有 许多 用 法 留待 读 





































































































1. 使 用 标准 DOM 接 口 区 分 系统 类 型 
可 在 HTML 中 的 任意 位 置 插入 JavaScript 代码 进行 判断 。 示 例如 下 : 






























































var isAndroid = (/android/gi) .test (navigator.appVersion); 


此 方法 比 在 apiready 中 使 用 apisystemType 判断 ， 在 使 用 时 机 上 更 提前 ， 可 在 HTML 页 再 
未 开始 泻 染 时 根据 不 同 操作 系统 做 一 些 个 性 化 的 优化 操作 。 








































































































2. 最 佳 的 沉浸 式 效果 适 配 时 机 
在 onload 事件 中 进行 沉浸 式 效 果 适 配 。 代 码 如 下 : 















































window.onload = function() { 
Var el = $api.byId('header'); 
if (!el) { 
return; 





, 
if (!isAndroid) { //i0S 沉 浸 式 
el.style.paddingTop = '20px'; 
}else{//android 沉 漫 式 
Var u = navigator.userAgent; 
Var Ver = parseFloat (u.substr(u.indexOf ('Android') + 8, 3)); 
if (ver >= 4.4) { 
el.style.paddingTop = '25px'; 



































为 在 泻 染 过 
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比方 法 相 比 在 apiready 中 进行 " 沉浸 式 效果 " 的 适 配 时 机 更 提前 ， 可 避免 
程 中 更 新 DOM 元 素 的 样式 而 引起 界面 " 闪 动 " 的 问题 。 
























































3. 在 发 送 网 络 请 求 之 前 进行 网 络 状态 判断 
下 面 是 判断 网 络 状态 的 JavaScript 代码 。 


























function ajaxIfOnline() { 
if('none' == api.connectionType)!{ 
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alert (' 当前 无 网 络 ') ; 


api.ajax({ 
url:'http://www.apicloud.com', 
dataType: 'text'"' 

}, function(ret, err) { 





if (ret) { 
console.1og ("成 功 .请 求 结果 : \n" + JSON.stringify (ret)); 
} else { 
console.1o0g(' 失败 .网络 状 态 码 :' + err.statusCode + '\n 错 误 码 :' + err. 
code + '\n 错 误 信息 :' + err.msg); 


} 
]) 7 














断 ， 在 更 早 的 时 机 








起 



































可 以 在 发 出 请 求 之 前 ， 适 当 的 使 用 api 属性 进行 当前 设备 网 络 状态 的 关 
提醒 用 户 ， 不 必 等 等 请 求 失败 后 提醒 用 户 ， 从 而 提升 App 体验 。 













































































10.9 地 图 模块 的 实用 扩展 : 在 地 图 上 添加 自 定 义 按 乌 


地 图 模块 在 很 多 应 用 里 被 广泛 使 用 ， 模 块 Store 上 面 的 地 图 模块 封装 了 地 图 提供 方 的 官方 











































































































































































































JAPAN ,人 


去 ， 如 图 10-8 所 示 。 





SDK， 如 果 想 要 在 地 图 上 增加 几 个 按钮 来 实现 某 些 自 定义 功能 ， 就 需要 自 定义 添加 一 些 按钮 上 




















作 佳 园 人 O 微 苑 
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图 10-8 

















10.9 地 图 模块 的 实 








扩展 : 1 











地 医 
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定义 按钮 
























































































































































闫 现 自 定义 按钮 的 关键 就 是 APICloud 官方 提供 的 免费 模块 UIButton 。 
是 点 击 中 心 点 按钮 ， 让 地 图 回 到 中 心 点 。 代 码 如 下 
var aMap = api.require('aMap'); // 引入 地 图 模块 ， 这 里 使 用 的 是 高 德 地 区 
var UIButton = api.require('UIButton'); // 引入 UIButton 模 块 
var lon = 116.4021310000; 
Var lat = 39.9994480000; 
aMap.open ({ 
rect: { 


Ks Oy 
y: 65， 

w: "auto'v 
h: api.frameHeight - 65 


Tons .Lome 
Lt 
}, 
showUserLocation: true, 
zoomLevel: 14, 
fixedOon: api.frameName, 


fixed: true 
}s function(ret, 
if (ret) { 
Var buttonId; 
UIButton.open ({ 
rect : { 


err) { 





api.frameWidth - 52, 
api.frameHeight - 140, 
40， 

40 


Tz%~ x 


]v 

[ee 

Dy 
normal: 'widget://img/dingwei.png', 
highlight: "widget://img/dingwei_ 2.png', 
active: 'widget://img/dingwei_ 2.png' 

}，// 这 里 是 按钮 的 三 种 样式 

fixedOon: api.frameName, 

fixed: true, 

move: false 

}, function(ret, err) { 

if (ret && ret.eventType === 

buttonId = ret.id 








'show') { 


} 
有 


(ret && ret .eventTyp eliek ty 并 




















这 里 要 实现 的 功能 





// 记录 下 来 按钮 的 id， 在 点 击 按 钮 的 时 候 ， 对 这 个 按钮 的 状态 进行 更 改 














// 在 接收 到 按钮 被 点 击 的 指令 之 后 ， 更 改 按钮 的 状态 为 normal， 








// 击 之 前 的 样式 
UIButton.getSstate ({ 

id: buttonla 

}, function (zety 


err) { 
主权 = 


(et .state == active') { 
UIButton.setSstate(f{ 

id: buttonId， 

state: 'normal' 


}) 
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来 改变 按钮 的 样式 ， 恢 复 未 点 
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让 
// 让 地 图 回 到 中 心 点 处 
aMap .setCenter ({ 
coords: 1{ 
lons: Lon 
了 有 七 lat 









































这 样 就 简单 地 实现 了 在 地 图 上 自 定义 按钮 的 功能 。 





























10.10 地 图 搜索 的 高 级 应 用 : 如何 获取 城市 地 铁 线路 列表 


在 App 的 实战 开发 中 ， 往 往 很 多 业务 需求 是 没有 对 应 的 直接 解决 方案 的 。 这 就 需要 



























































































































































































































































利 己 的 经 验 和 知识 ， 综 合 所 有 能 利用 的 条 件 资 源 ， 完 成 既 有 目的 需求 的 开发 。 如 本 节 示 斧 
示范 的 使 用 高 德 地 图 API 来 获取 城市 的 地 铁 线 路 列表 ， 就 是 使 用 aMap 模块 结合 高 德 JavaScript 
地 铁 图 接口 来 综合 完成 的 。 





























10.10.1 需求 分 解 


根据 本 示例 所 要 实现 的 功能 ， 可 以 分 解 得 到 以 下 两 
息 ， 以 及 获取 某 条 地 铁 线路 的 所 有 站 点 信息 。 




















个 需求 点 。 获 取 城 市 的 所 有 地 铁 线路 信 













































































10.10.2 功能 实现 
通过 下 面 的 步骤 实现 本 示例 的 功能 先 ， 引 初始 化 高 德 JavaScript 地 铁 图 对 象 。 然 后 
请 高 德 JavaScript 地 铁 图 API 的 开发 者 Key。 申 请 地 址 在 高 德 地 图 开发 心 。 最 后 引入 高 德 


地 铁 图 JavaScript API 文件。 





nt 





















































































































































































































































需要 引入 高 德 地 铁 图 的 








~ 





的 开放 API 方法， 所 V 














天 为 后 组 女 到 | Javascript 高 德 地 铁 
JavaScript 框架 。 代 码 如 下 : 



































<script type="text/javascript" src="http://webapi.amap.com/subway?v=1.0&amp;Kkey=ea0 
561116ddc03a7df25de867a5582fa&amp; callback=cbk"></script> 





。 创建 地 图 容器 。 


















































在 页 面 中 想 展 示 地 图 的 地 方 创 建 一 个 div 容器 ， 并 指定 id 标识 。 需 要 注意 的 是 ，JavaScript 
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高 德 地 铁 图 初始 化 以 后 ， 会 在 页 面容 器 中 同步 显示 地 铁 地 图 。 而 需求 是 不 需要 显示 地 图 图 形 勇 
面 的 ， 所 以 需要 先 设 定 一 个 隐藏 样式 的 DOM 容器 元 素来 承载 JavaScript 高 德 地 铁 图 对 象 。 示 例 
如 下 : 

HTML 部 分 
<div id="subway" style="display:none"></div> 
。 初始 化 一 下 JavaScript 高 德 地 铁 图 对 象 。 代 码 如 下 : 
JavaScript 代码 部 分 
oSubWay = subway ("subway", {easy:l1l,adcode:vCityCode}); 
。 获取 拥有 地 铁 城市 的 城市 信息 列表 。 
获取 拥有 地 铁 城市 的 城市 信息 列表 ， 这 样 需要 首先 判断 一 个 城市 是 否 存 在 地 铁 ， 如 果 该 城 
市 并 没有 被 包含 在 获取 的 地 铁 城市 列表 内 ， 则 可 以 直接 终止 后 续 操 作 。 
。 使 用 JavaScript 高 德 地 铁 图 开放 API 中 的 getcityList 方法 获取 当前 开通 地 铁 线 路 的 城 
列表 对 象 。 该 对 象 的 key 为 每 个 城市 的 adcode，value 为 城市 的 中 文 名 和 英文 名 。 
。 获取 城市 的 地 铁 线路 信息 。 
使 用 高 德 JavaScript 地 铁 图 开放 API 中 的 getLineList 方法 获得 当前 城市 所 有 线路 (已 排 
序 )。 需 要 注意 的 是 要 对 getLineList 的 内 容 进行 重复 数据 过 滤 ， 否 则 会 出 现 起 始 站 和 终点 站 
互 换 的 重复 线路 。 
。 获取 具体 地 铁 线 路 的 站 点 信息 。 
寻 为 通过 上 面 的 方法 已 经 获取 到 了 实际 的 地 铁 线路 名 称 ， 此 时 就 可 以 使 用 aMap 模块 的 
searchRoute 方法 获取 具体 地 铁 线路 的 详细 站 点 信息 了 。 

















目前 searchRoute 的 结果 回调 数据 中 ， 并 不 能 保证 同一 个 地 铁 线路 名 称 仅 返 
果 ， 因 为 有 地 铁 延 长 线 的 存在 。 所 以 还 需要 对 结果 数据 进行 利 选 过 滤 处 理 。 


aMap.searchBusRoute ({ 





city: vCityName,， // 城市 名 称 
line: pLineName,， // 地 铁 线 路 名 称 
offset: 50， 

Page: 1 


}, functionl(ret, err) 
if (ret && ret. 
var lineKeys 
var lineData 


ret .buslines 


{ 
status && ret.buslines && ret.buslines.length) 
[]; 

二 [3 
.forEach (function (lineObj){ 


{ 


// 对 获取 结果 进行 数据 过 滤 
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回 一 条 线路 结 
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if(' 地 铁 ' == lineobj.type){ 
lineKeys.push (lineObj.name); 
lineData.push (lineObj.busStops); 
} 
]) 7 


// 实测 同一 条 线路 名 称 ， 可 能 存在 多 个 地 铁 线 路 (比如 地 铁 延 长 线 的 存在 )， 所 以 需要 弹 ! 








// 结果 二 次 显示 出 来 ， 由 用 户 选 择 最 终 想 查看 的 路 线 线路 站 点 信息 。 
api.actionSheet ({ 
title: ' 请 选择 具体 路 线 '， 
cancelTitle: ' 取 消 '， 
buttons: lineKeys 


























}， function(ret, err){ 
if( ret ){ 


oDataSource = lineDatal[lret.buttonIndex-1]; 


fnRefreshWithRailway (oDataSource); 


10.11 极光 推送 的 快速 实现 






















































































App 的 使 用 活跃 度 、 增 加 用 户 犁 性 、 提 升 留存 率 等 。 



























































App 的 推送 功能 ，iOS 一 般 通 过 调 果 统 一 的 APNS 推送 提 
条 提供 和 APNS 服务 类 似 的 消息 推送 服务 GCM， 但 该 服务 在 
App 需要 自 建 Android 推送 ,一 般 可 以 通过 App 与 服务 器 建立 TCP 
商 自行 开发 一 套 推送 系统 ， 需 要 大 量 的 人 力 
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Android 上 Google 





































































































能 。App 
可 以 直接 选择 使 款 成 熟 稳定 的 推送 产品 ， 简 单 己 
身 支持 推送 (push 模块 ) 功能 ， 同 时 还 接 入 了 如 极光 推 蕊 






































HF 







































































































































































下 面 介绍 如 何在 APICloud 中 使 用 极光 推送 模块 为 App 快 i 









































10.11.1 获取 App 包 名 








推送 功能 现在 几乎 是 App 的 标准 配置 ， 一 款 App 产品 运营 好 推 世 


















































pe 

































































H 一 个 sheet 界面 将 




















连接 的 方式 来 实现 
期 长 、 成 本 高 。 兰 
































吉 p 

















速 地 实现 App 推送 功能 。APICloud 






































模块 )、 阿 里 云 推 送 (aliPush 模块 )、Google 推送 (googlePush 模块 ， 即 GCM) 等 了 



































F 台 本 
(pushGeTui 
吾 滨 














在 APICloud 控制 台 获 取 应 用 包 名 。 操 作 步 骤 : 应 
Android 证 书 下 的 包 和 名， 如 图 10-9 所 示 。 
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人 APICloud 三 ~ App 开 发 人 0 到 1 SSRP 文本 ”在 经 社区 。 出 块 Stofe 。。 男 队 协作 pomeo 
mi Androlda* ER a 
次。 wa 
a compomelocy | we | 
ws 
全 而 pomelo 
全 ooo0or 
全 5 | | eeeoocoo 
4 
图 10-9 
Si Ee 
注意 


极光 推送 平台 通过 App 包 名 和 签名 证 书 进 行 接 入 管理 。 因 此 ， App 的 包 名 和 证 书 一 旦 确定 ， 
量 不 要 更 改 ; 如 果 因 不 得 已 的 情况 必须 更 改 ， 则 需要 将 新 的 信息 更 新 到 极光 推送 平台 


10.11.2 获取 极光 推送 AppKey 

登录 极光 推送 官网 https://www.jiguang.cn， 进 入 控制 台 ， 进 行 “ 创 建 应 用 ”。 创 建成 功 后 ， 
将 在 “推送 设置 ”界面 使 用 之 前 获取 的 应 用 包 名 填 入 “应 用 包 名 ”位 置 ， 并 保存 ， 如 图 10-10 
所 示 。 

















































































































































































































会 | APFP 开 发 人 0 





保存 生生 三 焕 全 下 可 


D Toren Mmeracanon 





图 10-10 












































进入 “应 用 信息 ”界面 ， 复 制 AppKey， 如 图 10-11 所 示 。 
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APP 开 发 从 0 斩 1 


25864d85c5e43e83652e4571 


查看 。 重量 Nasier Secwt 


2017-12.11 1455.06 


2017-12-11 14.58.57 


ts 





图 10-11 


10.11.3 配置 极光 推送 模块 
将 之 前 获取 的 AppKey， 根 据 ajpush 模块 的 帮助 文档 要 求 ， 配 置 到 项 目的 config.xml 文件 中 ， 
操作 如 下 : 


















































<feature name="ajpush"> 
<param name="app_key" value="25a84d85c5e43e83652e4571" /> 
<param name="channel" value="apicloud-dev" /> 

</feature> 





app_key 字段 为 之 前 获取 的 极光 推送 平台 AppKey ; channel 字段 可 根据 App 发 布 的 不 同 
应 用 渠道 而 自 定义 对 应 的 字符 时， 极光 推送 具有 统计 分 析 能 力 ， 该 字段 可 以 在 极光 推送 控制 台 
显示 相应 渠道 的 App 相关 信息 ， 作 为 追踪 标识 。 












































































































































10.11.4 在 代码 中 监听 推送 消息 


极光 推送 的 消息 机 制 有 两 种 。 ' 是 “通知 ”类 型 的 推送 ,模块 会 直接 弹出 通知 到 状态 
栏 。 另 一 种 是 “消息 ”类 型 的 推送 ， 如 果 代码 中 已 经 通过 setListener 监听 了 消息 ， 将 不 会 自 
函数 中 ， 即 “ 透 传 ”， 开 发 人 员 可 在 代码 中 自行 
[到 状态 栏 。 状 态 栏 通知 被 点 击 时 ， 可 通过 监听 
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动弹 出 通知 到 状态 栏 ， 推 送 内 容 会 直接 交 到 回 ; 


处 理 ; 如 果 没 有 设置 监听 ， 则 仍 会 自动 弹出 ii 
appintent 事件 获取 推送 内 容 。 





























































































































次 













































































其 关键 代码 如 下 所 示 。 





10.11 极光 推送 的 快速 实现 203 

















(1) 监听 推送 消息 和 移 除 监听 ， 代 码 如 下 : 




















function setListener(){ 
jpush.setListener (function(ret, err){ 
if(ret)t{ 
api.alert ({msg: ' 收 到 消息 : \n' + JSON.stringify (ret)}); 
} 
}); 
api.alert ({msg: ' 设 置 成 功 ， 收 到 的 消息 将 通过 此 函数 回调 给 网 页 ， 不 再 弹出 通知 到 状态 栏 ' } ) ; 
} 





























function removeListener(){ 
jpush.removeListener (); 


api.alert ({msg: ' 移 除 成 功 ， 移 除 后 网 页 将 不 再 收 到 消息 ， 消 息 将 弹出 通知 到 状态 栏 ' } ) ; 

















} 

















(2) 监听 状态 栏 通知 被 点 击 事件 ， 代 码 如 下 : 

















apiready = function(){ 
api.addEventListener({ 
name:'appintent' 
}, function(ret, err) { 
api.alert ({msg:' 通知 被 点 击 ， 收 到 数据 : \n' + JSON.stringify (ret)}); 





}) 


(3) 编译 并 安装 App 


























提交 代码 ， 因 为 config 中 已 配置 了 ajpush 模块 的 feature， 该 App 将 默认 绑 定 极光 推送 模 
块 。 云 编译 正式 版 App， 并 安装 到 手机 ， 至 少 联网 启动 App 一 次 。 极 光 推 送 模块 将 在 App 启动 
时 自动 初始 化 ， 并 与 极光 推送 服务 器 建立 推送 通道 ， 等 待 服务 器 推送 数据 的 下 发 。 






















































































































































































10.11.5 开始 推送 
















































































































































































































































































































































































登录 极光 推送 官网 进入 控制 台 ， 选 择 已 经 创建 的 App， 切 换 到 “推送 ”导航 面板 ， 在 左 侧 
的 导航 列表 中 选择 “发 送 通知 ”， 输 入 相关 推送 内 容 后 选择 “Android” 平 台 ， 推 送 目标 人 和 群 为 
“所 有 人 ”， 点 击 “ 立 即 发 送 ” ， 如 图 10-12 所 示 。 约 数秒 之 内 ， 手 机 状态 栏 将 显示 收 到 一 条 推 
送 消息 。 

此 外 ， 如 果 和 希望 App 支持 iOS 平台 推送 ， 须 前 往 发 者 中 心 ， 为 App 申请 推送 证 书 ， 
并 在 “推送 设置 ”中 将 iOS 推送 证 书 填 入 对 应 的 位 置 。 极 光 推 送 还 提供 多 种 业务 场景 下 的 个 性 




































































































































































化 推送 ， 比 如 单 推 、 组 推 、 定 时 推送 、 离 线 消息 等 ， 可 根据 不 同 的 需求 ， 通 过 调用 极光 推送 3 
台 的 服务 器 端 REST API 使 用 。 
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目标 平台 ( 尼 造 ) 





10 一 12 


10.12 小 结 


本 章 介 绍 了 一 些 App 开发 中 常用 的 功能 实现 和 开发 报 巧 ,这些 知 识 内 容 基 础 而 实用 ， 能 应 
| 各 类 App 开发 中 。 我 们 相信 大 家 在 App 开发 中 也 会 不 断 积 累 各 种 开发 技巧 ， 欢 迎 大 家 在 官 
方 社区 中 进行 分 享 。 











到 










































































































































































出 









































中 


第 11 章 
性 能 优化 探索 











本 章 将 介绍 几 种 常用 的 App 优化 方法 ， 这 些 方法 的 学 习 和 使 用 很 简单 ， 对 App 效率 和 性 能 
的 提升 却 有 很 大 的 帮助 。 


示例 1 讲述 的 是 图 片 的 缓存 处 理 机 制 ， 图 片 缓 存 处 理 在 整个 APP 开发 中 都 是 一 个 需要 重视 
的 问题 。 





示例 2 通过 一 个 小 案例 ， 阅 述 了 APICloud APP 开发 的 一 个 重要 编程 理念 ， 对 于 从 前 端 Web 
开发 转 到 App 开发 的 同学 ， 尤 其 需要 认真 体会 。 


示例 3 讲述 了 登录 流程 的 优化 处 理 ， 其 中 讲述 的 这 种 逻辑 方法 可 适用 于 多 个 业务 场景 。 

示例 4 从 底层 讲解 了 同步 /异步 的 运行 原理 和 优 劣 对 比 ， 同 时 示范 了 APICloud 模块 的 同步 / 
异步 使 用 方法 。 
学 习 目 标 

(1) 使 用 api.imageCache 进行 图 片 缓存 处 理 。 

(2) 优化 频繁 地 从 DOM 上 获取 数据 引起 的 性 能 问题 。 

(3) 如 何 提供 流畅 的 用 户 登 录 体 验 。 

(4) 合理 使 用 同步 /异步 接口 。 
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11.1 用 imageCache 缓存 图 片 


APICloud 提供 了 一 个 api 方法 'api.imageCache'"， 用 于 图 片 的 本 地 缓存 处 理 。 图 片 缓存 处 
里 在 一 款 应 是 必 不 可 少 的 。 图 片 缓存 后 ， 当 应 次 请 求 同 一 地 址 的 网 络 图 片 时 ， 就 不 需 


~ » 


从 图 片 的 网 络 地 址 去 请 求 下 载 ， 而 是 读 取 本 地 的 缓存 图 片 ， 这 样 大 大 加 快 了 页 面 的 加 载 速 


| 


本 用 法 如 下 : 
































































































































































































































































































































及 ， 





api.imageCache ({ 
url: 'https://www.apicloud.com/img/default .png' 
}， function(ret, err) { 
Var url = ret.url; 
/* 
a 
* ”status:true，// 是 否 成 功 ， 布 尔 类 型 
* url: ''// 图 片 本 地 存储 路 径 ， 若 下 载 失 败 ， 则 返 
wk 











传 入 的 url1， 字 符 串 类 型 





互 













































































以 上 就 是 最 基本 的 用 法 ， 其 最 简单 的 使 用 场景 就 是 获取 个 人 头像 。 调 用 远程 接口 ， 获 取 到 
头像 地 址 之 后 ， 再 调用 图 片 缓存 接口 ， 把 缓存 的 图 片 展示 在 页 面 上 。 因 为 只 需要 显示 头像 ， 只 
涉及 一 个 DOM 元 素 。 所 以 可 直接 在 回调 函数 中 找到 元 素 赋值 即 可 完成 需求 。 
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wl 
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下 面 是 完整 的 功能 万 














var portrait = $api.dom('#portrait'); // 假设 此 元 素 是 img 标 签 
api.imageCache ({ 
url: 'https://www.apicloud.com/img/default .png' 
}, function(ret, err) { 
ifl(ret && ret.status) { 
Sap .attr{portrait, "Sre';y ret. url)y 
// 缓存 成 功 ， 蔡 换 为 缓存 好 的 图 片 地 址 
} 
4 (EE) 
Sapiattr(portraity SEC wld- oimg/default png'}s 


// 如 果 缓 存 失败 ， 展 示 默 认 头 像 (img 标 签 有 默认 图 片 地 址 的 不 用 修改 ) 




















}); 















































接 下 来 是 一 个 常见 的 对 列表 中 的 图 片 进行 缓存 的 场景 ， 如 图 11-1 所 示 。 
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imageCache 缓存 
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0901-2 木 瓜 
呈 ¥ 12.00 只 
di 测试 水 果 01 
bp 1 A 人 吃 过 库存 23211 
WW y 0.01 + 
SS 测试 水 果 02 
于 ¥ 0.01 十 
《aa 测试 水 果 03 
¥ 0.01 中 
测试 水 果 04 
¥ 0.01 中 
图 11-1 
这 里 比较 常用 的 方法 是 在 接 到 数据 之 后 ， 循 环 数据 时 ， 将 链接 跟 DOM 元 素 的 标识 
JSON 数组 ， 然 后 交 给 程序 处 理 。 
function fnImageCache (datal) { 
for(var 1 = 07 i < data.length; i444)1 
Var item = datalil]; 


var elements $api.domAll (item.flag); 


item.src; 


var gre 
(function(_data){ 
api.imageCache ({ 


Url: datassres 








图 








thumbnail: true // 如 果 觉 得 缩 略 
function (ret， err) { 

ifl(ret && ret .status) { 

07 
Var _item 
$api.attr(_item, 








}, 


for (var J 








// 缓存 成 功 ， 蔡 换 为 缓存 好 的 
} 
} else { 
// 如 果 缓 存 失败 ， 展 示 默 认 图 片 
} 
}); 
}({ 
elements: elements, 
Sre: SEC 
的 
} 
} 
var arr = []? 
/* 
* ”假设 arr 是 这 样 的 数组 
人 
* flag: ''，// DOM 元 素 的 标识 ， 例 如 , className 


D0000000000000 https// 


质量 不 高 ， 可 以 设置 成 £alse， 使 用 


j < _data.elements.length; 
_data.elements[j]; 
"SrC' ret.url); 


图 片 地 址 


























j++ 
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去: 


大 src: '， // 需要 缓存 的 图 片 地 坟 
* 
本 办 
// 在 插入 这 些 DOM 元 素 之 后 ， 就 可 以 调用 上 面 的 方法 
fnImageCache (arr); 

// 缓存 成 功 之 后 ， 就 会 找到 对 应 的 DoM 元 素 ， 并 给 src 赋 值 



























































还 有 一 种 方法 ， 可 以 用 在 重复 图 片 较 多 的 场合 。 例 如 聊 会 频繁 出 现 同 一 个 头像 ， 
况 下 可 以 考虑 用 如 下 方法 。 




































































际 
车 



































// 这 个 方法 是 给 DoM 元 素 ， 如 div 添加 background-image 属性 ， 实 现 一 个 css 样式 给 所 有 相同 className 元素 添 加 
// 同 一 个 背景 图 片 

var _head = $api.dom('head'); // 获取 页 面 中 的 nead 元 素 

Var cacheImgCount = { 














// 这 个 是 用 来 记录 哪些 图 片 被 成 功 缓存 过 ， 缓 存 过 的 就 不 做 缓存 处 理 
function fnImageCache (tag, Src) { 
if (cacheImgCount [tag]) { 
// 如 果 被 成 功 缓存 ， 就 不 做 处 理 
} elsel{ 
api.imageCache({ 
Ls 
thumbnail: true // 如 果 觉 得 缩 略 图 质量 不 高 ， 可 以 设置 成 false， 使 用 原 图 
}: function (rets err)1{ 
// 创建 一 个 style 标 签 ， 里 面 的 内 容 就 是 给 需要 缓存 背景 图 的 元 素 加 上 背景 图 片 属性 
Var Ste 二 
if (ret && ret.status) { 
str += '<style>'; 

































































Sb = 改 最 古寺 人 
St += ‘background-lmages: Urlt{t+ ret, Url 4+7)3?"3 
str += 1} 07 


str += '</style>'; 

// 拼接 好 字符 串 之 后 ， 把 它 作 为 标签 ， 插 入 到 head 元 素 末尾 ， 这 样 ， 页 面 里 所 有 带 此 标识 的 元 素 ， 
// 背景 图 片 都 会 变 成 缓存 的 图 片 

$api.append( head , str); 

// 最 后 将 这 个 标识 置 为 true， 下 次 不 做 缓存 处 理 





























cacheImgCount [tag] = true; 
} else { 
cacheImgCount [tag] = false; 


11.2 数据 不 要 从 DOM 上 获取 
































很 多 初次 使 用 HIML5 开发 App 的 开发 者 可 能 不 会 意识 到 ， 移 动 端 在 性 能 上 与 PC 端的 
Web 浏览 器 有 一 定 的 差距 ， 需 要 开发 者 积累 更 多 的 移动 端 经 验 ， 才 能 开发 出 性 能 优异 的 App 来 。 
比如 一 些 Web 前 端 工程 师 或 者 懂 一 些 前 端 技术 的 后 端 工 程 师 都 容易 养 成 的 习惯 : 因为 依赖 使 
JQuery， 通 常 都 会 在 点 击 事件 之 后 ， 从 点 击 的 DOM 树 上 找到 所 需要 的 数据 ， 然 后 取出 来 。 整 
个 过 程 简单 方便 ， 这 是 Web 开发 过 程 中 的 常用 操作 。 但 在 移动 端 ， 频 繁 地 操作 DOM 会 影 
App 性 能 ， 我 们 需要 换 种 方式 来 改进 。 
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11.2” 数 扩 





举 个 例子 ， 如 图 








11-2 所 示 。 








居 不 要 从 DOM 上 获取 
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1 
¥18.00 + 
图 11-2 
/ Wp yw 品 
在 购物 车 中 的 增 减 数量 这 类 操作 ， 代 码 如 下 : 
// html 部 分 
' 
<div> 
<span onclick="countMin()" tapmode >-</span> 
<input type="text" id="count_text"> 
<span onclick="countAdd()" tapmode >+</span> 
</div> 
' 
// JavaScript 部 分 
function countMin(){ 
// 购物 车 减少 商品 数量 
Var currentCount = parseInt ($api.val (count_ text)) [| 0; 
if(currentCount <= 0){ 
currentCount = 0; 
} else { 
currentCount—-—;} 
} 
$api.val (count_ text, currentCount); 
function countRda () { 
// 购物 车 增加 商品 数量 
Var CurrentCount = parseInt ($api.val (count_ text)) [| 0 


currentCount++; 
$api.val (count_text, currentCount); 














































































































这 个 代码 看 起 来 没有 问题 ， 但 在 实际 使 用 的 时 候 ， 如 果 频 繁 点 击 增 
的 情况 。 尤 其 在 iOS 上， 如果 本 身 应 用 的 功能 多 ， 性 能 损耗 大 ， 这 一 点 
明显 。 这 时 需要 做 的 是 将 var currentCount = 









































步 需 要 的 数据 ， 从 数据 源 那 里 取出 来 。 代 码 如 下 : 








// html 部 分 


<div> 
<span onclick="countMin(1)" tapmode >-</span> 
<input type="text" id="count_text"> 
<span onclick="countAdd(1)" tapmode >+</span> 


</div> 


' 


// 上 面 的 countMin (1), countAdd (1) 中 的 1， 是 商品 的 uid 
// JavaScript 部 分 





var data = [{ 
Was 二 
Sounts. 1 
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parseInt ($api.val (count_text)) 


性 能 的 损耗 让 卡 顿 变 得 


加 按 和 








， 会 发 现 有 卡 顿 

















| 








|| 0; 
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}]; 

// data 是 假设 的 请 求 到 的 数据 

var _data = { 
二 

. 

// _qdata 是 根据 data 整理 出 来 的 数据 

function countMin (uid){ 
// 购物 车 减少 商品 数量 
// 根据 传 入 的 uid 找 到 源 数据 中 的 count 








Var currentCount = _dataluid]; 

if(currentCount <= 0){ 
currentCount = 0; 

} else { 


currentCount==} 

} 
$api.val (count_text, currentCount); 
_data[luid] = currentCount; 

} 

function countAdd (uidqd){ 
// 购物 车 增加 商品 数量 
// 根据 传 入 的 uid 找 到 源 数据 中 的 count 
Var currentCount = _datal[luid]; 
currentCount++; 
$api.val (count_text, currentCount); 
_data[luid] = currentCount; 





























这 样 处 理 后 ， 便 会 降低 性 能 损耗 ， 提 高 App 的 运行 速度 。 














11.3 流畅 的 用 户 登录 体验 


APICloud 引擎 内 有 独立 的 窗口 布局 系统 ， 屏 幕 级 别 的 Window 组 件 以 栈 的 方式 驻 留 在 内 存 
， 设 备 屏幕 上 同时 最 多 有 一 个 Window 进行 泻 染 。 当 在 代码 中 使 用 apiopenWin 打开 一 个 新 的 
Window 将 被 压 入 后 台 停 止 泻 染 ， 同 时 新 打开 的 Window 将 展示 到 屏 
篇 并 开始 泻 染 ， 切换 伴随 过 渡 动 画 效果 ， 当 关闭 Window 时 ， 当 前 屏幕 上 的 Window 
被 移 除 并 销毁 ， 内 存 栈 中 顶部 的 Window 再 次 回 到 设备 屏幕 继续 泻 染 。 这 个 过 程 和 Android、iOS 
系统 的 原生 窗口 架构 以 及 原理 是 一 致 的 ， 带 来 的 好 处 是 App 的 动画 效果 很 流畅 ， 与 原生 几乎 一致 。 


11.3.1 程序 员 的 思维 习惯 

大 多 数 场景 下 ，Window 演 染 机 制 都 能 很 简单 友好 地 帮 发 者 快速 实现 业务 。 对 于 App 
发 人 员 而 言 ， 登 录 页 面 是 再 熟悉 不 过 的 场景 ， 然 而 很 多 开发 人 员 也 正 是 在 此 处 陷入 一 个 “ 假 ”还 
辑 : 当 产 品 设 计 要 求 App 必须 登录 才能 使 用 时 ， 发 人 员 在 实施 过 程 中 通常 认为 流程 应 该 如 下 所 示 。 











































































































































































































Xe 


Window 时 ， 当 前 屏幕 上 日 
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App 启 动 一 进入 登录 页 一 登录 成 功 一 打开 主页 


在 大 多 数 情 况 下 ， 这 个 流程 没有 问题 。 但 在 App 的 主页 需要 初始 化 大 量 业务 的 情况 下 ， 登 
































































































































































































































录 成 功 后 通过 openWin 跳 转 主页 时 ， 因 主页 初始 化 需要 较 长 时 间 ， 在 此 期 间 屏 幕 上 无 UI 可 泻 
有 未 ， 将 展示 系统 默认 的 Apb 背景 色 ， 有 具体 效果 就 是 通常 所 说 的 “ 白 屏 ”或 者 “黑屏 ”。 
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11.3.2 正确 的 做 法 


可 以 将 登录 流程 做 一 个 小 的 改动 ， 以 保证 在 “登录 才能 使 用 ”的 产品 逻辑 不 变 的 情况 下 实 
现 优 化 ， 避 免 “ 白 屏 ” 或 者 “黑屏 ” 间 题 。 示 例如 下 : 














































































































App 启 动 一 进入 主页 开始 初始 化 业务 一 判断 是 否 登 录 一 未 登录 打开 登录 页 一 登录 成 功 一 关闭 登录 页 一 流畅 


的 过 渡 回 主页 





























11.3.3 ”关键 代码 实现 
年 代 码 层 面 ， 可 以 通过 以 下 4 个 步骤 实现 流畅 的 用 户 登 录 体 验 。 其 中 需要 注意 的 是 ，Android 
设备 通常 带 有 物理 Back 键 ， 户 点 击 该 按键 时 ，APICloud 引擎 将 默认 关闭 当前 Window 并 回 退 到 上 
个 。 因 此， 为 了 避免 登录 页 被 用 户 点 击 Back 键 而 关闭 ， 我 们 需要 在 代码 中 做 拦截 Back 键 的 处 理 。 































































































































































































































































































(1) config 指定 入 口 页 为 App 的 主页 。 修 改 content 的 src 属性 ， 修 改 入 口 页 为 home.html。 
代码 如 下 : 




















<widget id="A0000000000001" version="0.0.1"> 
<name> 流 畅 的 用 户 登录 体验 </name> 
<content src="home.html" /> 

</widget> 












































二 














(2) 主页 (home.html) 中 使 用 同步 接口 判断 本 地 存储 的 登录 状态 并 进行 跳 转 操作 ， 同 时 监 
听 登 录 成 功 事件 ， 刷 新 相关 数据 。 代 码 如 下 : 












































//home.html 
function checkLogin(){ 
Var login = getPro('is_login'); 
if(!login)t{ 
// 未 登录 ， 直 接 打开 登录 页 
api.openWin(t{ 
name:'login', 
Url /html/login.html' 
1); 
} 
return login; 
} 
apiready = function(){ 
api.addEventListener({ 
name:'login_success' 
}, function (zet){ 
// 登录 成 功 ， 刷 新 数据 
refreshData(); 
}); 
if(checkLogin()){ 
// 已 登录 状态 ， 直 接 刷 新 数据 
refreshData() 7 


】 

















} 
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性 能 优化 探索 








function refreshData(){ 
//TODO Refresh 
} 





























(3) 登录 页 拦截 Back 键 ， 避 人 免 Android 设 户 使 用 物 








里 Back 键 关闭 登录 页 。 代 码 如 下 : 














i 





//login.html 
apiready = function() { 
api.addEventListener({ 
name: "keyback' 
}, functionl(ret, err) { 
api.closeWidget (); 
}); 
}; 























(4) 登录 成 功 ， 存 储 登 录 状 态 ， 并 发 





页 。 代 码 如 下 : 











= 
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成 功 事 件 ， 关 闭 登 录 窗 口 ， 回 于 























Ee 
二 











//login.html 
function loginSuccess(ret) { 
IE (ret .status) { 
setPro('is_login', true); 
api.sendEvent ({ 
name: 'login_ success' 
}); 
api.closeWin({ 
animation:{ 
type:'fade', 
duration:250 


}); 









































比 外 ， 还 可 以 通过 服务 器 端 配 合 开发 相应 的 策略 ， 在 保证 安全 的 前 提 下 ， 维 持 一 个 用 户 的 
登录 状态 在 尽 可 能 长 的 时 间 内 不 过 期 ， 保 持 App 端 用 户 的 长 期 登录 状态 ， 避 免 频繁 的 登录 操作 ， 
提升 用 户 体验 。 




















































































































11.4 合理 使 用 同步 / 异步 接口 


标准 JavaScript 的 执行 分 为 同步 和 异步 两 种 模式 ，APICloud 的 所 有 扩展 API 也 同时 支持 同 
步 或 异步 的 调用 ， 它 们 适用 于 不 同 的 场景 。 本 节 为 读者 解析 同步 / 异步 接口 的 特点 和 使 用 建议 。 
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11.4.1 JavaScript 的 同步 /异步 机 制 


JavaScript 中 同步 与 异步 的 区 别 如 下 。 
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下 











在 浏览 器 引擎 技术 中 ，JavaScript 引擎 是 单线 程 执行 的 ， 单 线程 意味 着 在 同一 时 间 内 只 能 才 
一 段 代 码 被 JavaScript 引擎 执行 。 所 以 JavaScript 函数 以 一 个 接着 一 个 的 栈 方式 执行 ，A 函数 如 及 
依赖 B 函数 的 返回 结果 ， 那 么 A 函数 必须 同步 等 待 B 函数 返回 结果 后 才 有 执行 机 会 。 
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Javascript 代码 的 典型 编写 方式 如 下 : 


<script> 

function printFile(){ 

Var text = readFile(); 
console.1og('printEile 内 容 : ' + text); 
} 


function readFile(){ 

Var content = fileOjb.read('file path'); 
console.1log ('readFile 结 果 : ' + content); 
return content; 

1 

/Script> 





























在 readFile 函数 未 执行 完毕 并 返回 结果 之 前 ，printFile 函数 的 text 将 阻塞 并 等 待 。 以 上 
代码 日 志 输出 顺序 为 : 












































console.1log ('readFile 结 果 : ' + content); 
console.1og('printEile 内 容 : ' + text); 





遂 数 按照 依赖 关系 顺序 执行 。 


。 异步 机 制 





















































JavaScript 的 同步 模式 符合 开发 人 员 通 常 的 编码 习惯 ,无 论 从 逻辑 或 者 是 代码 的 审美 方面 都 
容易 被 接受 ,但 性 能 问题 也 因此 而 起 。 当 函数 栈 中 某 个 函数 的 执行 耗 时 过 长 时 ， 将 引起 函数 栈 
后 面 的 所 有 函数 延迟 执行 ， 引 发 程序 性 能 问题 。 这 在 移动 端 体验 优先 的 场景 下 是 无 法 接受 的 。 
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异步 模式 因此 诞生 。APICloud 所 有 扩展 API 在 现 有 JavaScript 同步 模式 的 基础 上 ，3 
入 JavaScript CMD (Common Module Definition) 的 模块 化 定义 规范 API 的 调用 遵循 AMD 
(Asynchronous Module Definition) 异步 方式 加 载 ， 通 过 实现 AMD 规范 下 的 JavaScript 异步 加 载 
模式 ， 能 够 很 好 的 解决 性 能 问题 。 



















































































11.4.2 异步 的 优势 


APICloud 的 JavaScript 异步 编程 模式 可 以 总 结 为 3 个 关键 词 : 
require。 典 型 的 使 用 代码 如 下 : 





五 





| 由 
下 
六 
EE 
Em 
荆 
3 
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调 函 数 、 
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<script> 
En 芍 
var fs = 
fs .read ( 
Eds 
2 DELNE 
console. 
} 
// 回调 函数 
function p 
if (ret. 
A 所 入 
consol 
} else { 





能 优化 探索 


eadFile(){ 
api.require('fs'); 

{ 

leId" 

File); 

log ('readFile 执 行 完毕 ....'); 


rintFile(ret, err){ 

status) { 

xt = ret.data; 
e.log('printFile 内 容 :' + text); 


console.log(JSON.stringify (err)); 


} 
} 


</aeript> 







































































会 因为 读 和 











行文 件 读 取 的 操作 。 操 作 结束 后 ， 将 结果 
区 的 文件 大 小 ， 耗 时 不 同 而 引起 阻塞 ,如 果 此 时 设 


当 调 用 模块 的 read 函数 时 ， 将 进入 对 应 的 原生 Android 和 iOS 系统 层 操作 ， 将 在 原生 子 
执 





El 


























调 JavaScript。 这 样 做 的 好 处 在 于 ，App 不 






























































的 问题 。 以 上 代码 日 志 输 出 顺序 为 : 








console.log( 
// 若干 时 长 后 ， 


console.log( 





异步 模式 能 够 将 App 的 逻辑 功能 与 UI 泻 染 更 好 的 解 厢 ， 将 耗 时 的 操作 放 在 多 线程 


'readFile 执 行 完 毕 ....'); 
为 文件 大 小 而 花费 时 长 不 一 
"PrintFile 内 容 : ' + text); 

















E 在 进行 UI 泻 染 ， 将 产生 
































执行 ， 






































充分 利用 设备 的 硬件 性 能 ， 使 App 能 更 专注 于 泻 染 ， 提 供 更 好 的 视觉 效果 及 响应 速度 给 















































11.4.3 应 用 实例 





中 > 



































在 App 过 程 中 ， 可 以 根据 不 同 的 操作 场景 ， 合 理 地 将 同步 操作 




















ep 
































2 公 
写 出 结构 更 合理 、 




















性 能 更 出 色 、 维 护 更 方便 的 JavaScript 代码 。 

















APICloud 





异步 操作 相 结 合 ， 编 


























































































































(1) 使 用 同步 接口 获取 App 缓存 大 小 ， 相 关 API 调用 方法 的 代码 如 下 : 














// 同 步调 




















function sycacheSize(){ 


var size 


= api.getCacheSize({ 


SYne: trus 


1); 


字 


alert (' 缓存 大 小 为 : ! + size + ' 字 节 '); 


} 
// 异 步调 

















function aycacheSize(){ 


展 API 中 ， 支 持 同步 操作 的 api 对 象 接口 通过 传 入 sync 参数 进行 同步 操作 声明 ， 
支持 同步 操作 的 模块 接口 以 Sync 结尾 。 


api.getCacheSize (function (ret) { 
Var size = ret.size; 
alert (! 缓 存 大 小 为 : ' + size + ' 字 节 '); 
]) 7 
























































(2) 使 用 同步 接口 判断 偏好 设置 ， 代 码 如 下 : 


























// 同步 调 
funetion isLogineye (ly 1 
var login = api.getPrefs({ 
sync: true, 
key: 'is_login' 
} 7 
alert (' 登录 状态 : ' + login); 
} 
// 异 步调 
function isLoginAyc(){ 
api.getPrefs({ 
key: 'is_login' 
}, isLoginCallback); 
} 

















function isLoginCallback (ret){ 
var login = ret.value; 
alert (' 登录 状态 : ' + login) 

} 























(3) 使 用 同步 接口 判断 文件 /文件 夹 是 否 存 在 ， 代 码 如 下 : 
































Var fs = api.require('fs'); 
Var ret = fs.existSync({ 
path; 'fs;//file test.txt" 
}); 
alert (ret .exist ? ' 存 在 ' : ' 不 存在 '); 





























(4) 使 用 同步 接口 对 文本 进行 MD5 加 密 ， 代 码 如 下 : 


本 章 从 图 片 缓 存 处 理 、 页 面 数 据 操作 人 处理、 登录 逻辑 优化 、 同 











Var text = 'hello'; 

text = api.require('signature') .md5Sync ({ 
data: text 

}); 

alert (' 加 密 结果 : ' + text); 
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iF 


ds 





外 结 215 

















少 





/ 异步 原理 等 几 个 方面 向 




















































































































读者 介绍 了 常用 的 App 优化 方法 。App 优化 在 开发 中 是 非常 重要 的 ， 灵 活 掌握 这 些 技巧 方法 
以 带 给 用 户 更 好 的 使 用 体验 。 章 节 篇 幅 有 限 ， 读 者 还 可 以 在 社 查看 他 人 分 享 
也 可 以 将 自己 的 优化 技巧 在 社区 中 进行 分 享 。 
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第 12 章 


调试 技巧 











主要 内 容 
本 章 将 介绍 常用 的 调试 技巧 ， 其 内 容 更 适合 已 有 项 目 开 发 经 验 的 开发 者 阅读 。 
示例 1 和 示例 2 讲述 了 Charles 抓 包 软件 的 使 用 ， 学 会 数据 抓 包 对 项 目 开 发 调试 很 有 帮助 。 
示例 3 和 示例 4 讲述 了 iOS 和 Android 的 断 点 调试 技巧 ， 这 种 调试 技巧 在 项 目 开发 中 非常 
实用 ， 建 议 好 好 掌握 。 
学 习 目 标 
(1) 如 何 使 用 Charles 查看 网 络 请 求 。 
(2) 如 何 使 用 Charles 模拟 网 络 请 求 。 
(3) 如 何 使 用 Safari 断 点 调试 iOS 应 用 。 
(4) 如 何 使 用 Chrome 断 点 调试 Android 应 用 。 
(5) 如 何 使 用 MarkMan 工具 来 快速 标注 设计 图 。 
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12.1 调试 技巧 : 使 用 Charles 查看 网 络 请 求 


Charles 是 在 Mac 或 Windows 下 常用 的 http 协议 网 络 包 截 取 工 具 。 























































































































































































































在 项 目 开发 时 经 常会 遇 到 网 络 请 求 失败 的 情况 。 一 个 失败 的 网 络 请 求 ， 原 因 可 能 出 现在 手记 
客户 端 ， 也 可 能 出 现在 服务 器 端 ， 所 以 定位 问题 很 关键 。 如 果 能 看 到 请 求 发 送 和 返回 的 原始 数 和 
就 可 以 快速 定位 问题 ， 提 高 联 调 的 效率 。 在 诸 中 ，Charles 是 目前 使 用 相对 较 多 的 一 款 
































































































































这 里 主要 讲述 如 何 使 用 Charles 来 查看 APICloud 应 用 的 网 络 请 求 。 如 果 是 第 一 次 使 















































Charles， 可 前 往 其 官方 主页 下 载 。 

















12.1.1 查看 HTTP 请求 



































假设 现在 我 们 个 简单 的 http 网 络 请 求 ， 具 体 代 码 如 下 。 可 按照 以 下 步骤 了 解 如 何 使 
Charles 查看 该 网 络 请 求 。 









































api.ajax({ 

















url: 'http://d.apicloud.com/mcm/api/module?filter={"where":{"name":"baiduLocation"},"ski 


人 
method: 'get', 


"headers": { 
"Xx-APICloud-AppId": "A6066862334734", 
"X-APICloud-AppKey": "af51dq64f9a25cf5911823d89802e849b465fe5f6.1511323227684" 


} 


}， function(ret, err) { 


if (ret) { 
api.alert ({ msg: JSON.stringify(ret) }); 
} else { 


api.alert ({ msg: JSON.stringify(err) }); 
} 
1); 


1. 在 Charles 中 查看 计算 机 的 本 机 IP 地 址 
使 用 Charles 调试 时 ， 需 要 满足 手机 和 计 
算 机 位 于 同一 局 域 网 内 。 





























© 8 Local IP Addresses 























The available local network interfaces and their IP addresses are listed 
below. Excluded from this fist are any loopback or link local addresses. 


















































在 Charles 查 计算 机 IP 的 方式 是 ， 顶 Mow Interface IP Address 
部 菜单 一 Help 一 Local IP Address， 如 图 12-1 
所 示 。 


2. 配置 册 -Fi 代 理 


在 手机 的 Wi-Fi 代理 配置 中 ， 手 动 配置 
代理 。 其 中 主机 名 ， 就 是 计算 机 的 卫 地 址 ， 图 12 一 ! 
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E 接 到 Charles 的 提示 ， 











个 弹 窗 ， 询 问 是 否 多 许 半 



































端口 固定 为 8888。 配 置 好 后 ， 计 算 机 上 会 显示 
到 12-2 所 示 。 


点 击 确认 (Allow) 即 可 ， 如 医 












































Connection from 192.168.31.28 
A connection attempt to Charles has been made from the host 192.168.31.28. You should only allow 


access to Charles to trusted users. If you deny this attempt you will not be asked again for this host 
address until you restart Charles. Access controls are maintained in the Access Control Settings in the 


= 
人 Proxy menu. 
Alow ET 





图 12-2 




















配置 代理 的 位 置 如 下 : 






























































般 在 设置 一 WLAN 一 代理 ， 
般 在 设置 一 无 线 局 域 网 一 配置 代理 。 














e。 Android 系统 ， 
。 iOS 系统 ， 








































































































3. 设置 过 滤 规 则 
默认 Charles 会 拦截 手机 的 所 有 请 求 ， 这 样 看 起 来 会 很 杂乱 。 可 以 设置 过 渡 规 则 ， 来 指定 只 
只 拦截 dapicloud.com 域名 下 的 请 求 ， 示 例如 下 : 


拦截 特定 域名 下 的 请 求 。 此 处 设 
Proxy 一 Recording Settings 一 include 一 add 一 Host 填写 d.apicloud.com， 
















































































点 击 Charles 顶部 菜 自 


然后 点 击 OK 确定 ， 如 图 12-3 所 示 。 









































Accept °/* 


Empty fieds match al values. Widcards * and ? may be used. See the Help for more 


information. 


cc CD 











图 12-3 





12.1 调试 技巧 : 使 


4. 查看 手机 上 的 网 络 请 求 


















































Charles 查看 网 络 请 求 














在 手机 AppLoader 中 运行 示例 代码 ， 将 看 到 真实 发 出 的 网 络 请 求 ， 如 图 12-4 所 示 。 








"crentedAt": 
"updatedAt": 
1 








O00n Charles 4.2.1- Session 1° 
2 Sas piclv ie 
Oveview Request Summary 
- @ https://d.apicloud.com ee 
"mem “id": "5al4e2faae5b8d5a6f651e33"， 
v i "neme": "baiduLocation”, 
< er “app_count": 16586, 


17-11-22T92:37:46,0322", 
2017-11-22T702:42:81,9772" 


Chart Notes 

















Headers Text Hex JavaScript JSON JSON Text Raw 
图 12-4 
12.1.2 查看 HTTPS 请 求 
APICloud 云 数 据 库 同时 支持 HTTP 和 HTTPS 访问 ， 请 根据 需要 自行 选择 。 这 里 简 























协议 改 为 HTTPS， 来 进行 相关 说 明 ， 代 码 如 下 : 


api.ajax({ 


















































的 


url: 'https://d.apicloud.com/mcm/api/module?filter={"where": {"name":"baiduLocation"}, "skip": 


和 
method: 'get', 
"headers": { 
"Xx-APICloud-AppId": "A6066862334734", 


"X-APICloud-AppKey": "af5l1d64f9a25cf5911823d89802e849b465fe5f6.1511323227684" 


} 


}, function(ret, err) { 


if (ret) 1{ 
api.alert ({ msg: JSON.stringify(ret) }); 
} else { 


api.alert ({ msg: JSON.stringify (err) }); 
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HTTPS 请 求 ， 能 被 拦截 到 ， 但 是 看 不 到 


12 章 调试 技巧 



































4 体 的 请 求 和 返 





bs 











的 内 容 ， 如 图 12-5 所 示 。 下 面 



































































































































将 介绍 如 何 解决 这 个 问题 。 
【天 区 Charles 4,2.1 - Session 1* 
2 " a © HCE 会 几 关 用 人 @ 
Sequence Overview 。 Request Summary Chart Notes 
Y @ https://d.apicloud.com HTTP/1.1 200 Connection established 
因 <unknown> 
Headers ”Raw 
cowecr 
12—5 
1. 在 手机 上 安装 Charles 根 证 书 
请 先 确保 手机 已 经 成 功 把 Charles 设置 为 自身 的 网 络 代理 ， 如 图 12-6 所 示 。 
© Charles 
a Configure your device to use Charles as its HTTP proxy on 192.168.31.7:8888, then browse to 
Pw chis.pro/ssl to download and install the certificate. 








图 12-6 

















12.1 













































































打 Charles 顶部 菜单 Help 一 SSL Proxying 一 Install Charles Root Certificate on a Mobile 
Device or Remote Browser。 这 时 会 弹 窗 提示 一 个 要 打开 的 地 址 ， 此 处 是 chls.pro/ssl。 不 同 版 本 的 
Charles 所 示 的 地 址 可 能 不 同 ， 以 实际 提示 为 准 。 

在 手机 浏览 器 中 打开 网 址 chls.pro/ssl， 般 会 自动 安装 Charles 根 证 书 。 
注意 

e Android 手 机 自 带 的 浏览 器 访问 chls. pro/ssl， 如 果 无 法 触发 根 证 书 自动 安装 行为 ， 请 改 用 

aoe 

e 只 安 信 的 Charles 根 证 书 ， 并 建议 在 测试 结束 后 尽快 移 除 JiOS 系统 一般 可 以 在 : 

置 一 - 一 描述 文件 和 设备 管理 中 删除 Charles 根 证 书 ; Android es 设 
置 一 更 多 设置 一 系统 安全 一 用 户 凭据 中 删除 Charles 根 证 书 。 


2. 启用 HTTPS 代理 

































































默认 HITPS 代理 是 关闭 的 ， 所 以 需要 手动 





选择 Charles 顶部 菜 身 








即 可 ， 如 图 








12-7 所 示 。 


























调试 技巧 : 使 











Charles 























并 





让 Proxy 一 SSL Proxying Settings > Add, 


SSL Proxying “Client Certificates Root Certificate 


Charles can show you the plain text contents of SSL requests and responses. 
Only the locations listed below will be Proxied， Charles will issue and sign SSL 


Edit Location 


cile, 二 


Empty tfieids mutch oll velues. Wildcards * and ? may be used. See the Heip for more 
nformation. 


Cancel 


3. 查看 手机 上 的 HTTPS 网 络 请 求 




















在 手机 AppLoader 


图 12-8 所 示 。 














运行 示例 HTTPS 请 求 的 代码 ， 可 以 
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cance 


OK 


查看 网 络 请 求 


入 dapicloud.com， 点 


ph 























到 HTTPS 请 求 的 具体 内 容 ， 





击 OK 


如 


[5 
[5 
ID 
qT 
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, 
"crentedAt": "2017-11-22702:37;46,0322", 
"updotedAt"s "2017-11-221702;42:01,9772" 


【下 Charles 4.2.1 - Session 1° 
BEIR plicilv 全 > 
TE sequence Oveview Request 着 TB Summary Chart Notes 
* @ https://d.apicloud.com 区 
”mm "id": "5a14e2faae5b8d586f651e33"， 
Y Ml apl "ngae": "beiduLocation", 
- “app_count": 15686 


































































































Headers Text Hex JavaScript JSON JSON Text Raw 
图 12 一 8 
12.2 调试 技巧 : 使 用 Charles 模拟 网 络 请 求 
Charles 还 可 以 用 来 模拟 网 络 接口 。 借 助 于 Charles， 可 以 有 效 降 低 前 端 开 发 和 服务 端 开发 的 
耦合 性 。 只 要 有 了 接口 文档 ， 前 端 和 后 端 就 可 以 独立 并 行 开发 。 在 开发 工程 中 ， 前 端 工程 师 可 



















































































以 使 用 Charles 自行 模拟 各 种 数据 结构 来 完善 页 面 的 各 个 逻辑 和 功能 。 对 了 


















































求 ， 模 拟 数据 的 方式 相似 ， 下 面 仅 以 HTTP 请 





I 








12.2.1 请 求 示 例 代 码 


























求 为 例 。 


这 里 仍 以 下 面 这 段 HTTP 网 络 请 求 代码 为 例 : 

















api.ajax({ 
ls 



































F HTTP 和 HTTPS 请 


'http://d.apicloud.com/mcm/api/module?filter={"where": {"name":"baiduLocation"},"skip":0, "limit":20}"', 


method: 'get', 
"headers": { 
"Xx-APICloud-AppId": "A6066862334734", 


"X-APICloud-AppKey": "af5ld64f9a25cf5911823d89802e849b465fe5f6.1511323227684" 














12.2 ”调试 技巧 : 使 








}v 
function(ret, err) { 
于 本 大 交 全 和 
api.alert ({ msg: JSON.stringify (zet) 
} else { 
api.alert ({ msg: JSON.stringify (err) 


}, 
}) 
] 记 


上 
]) 7 























情况 下 ， 此 请 求 的 返回 值 类 似 如 下 代码 : 








五 
i 


~ 
止 帅 





[{ 
"id": "5al4e2faae5b8d5a6f651e33", 
"name": "baiduLocation", 
Tapp count "ss T6686 
"createdAt": "2017-11-22T02:37:46.0322"， 
rupdatedst: "20]7=11]-22T02s42:01:9772" 


12.2.2 构建 模拟 数据 
关 网 络 请 求 ， 本 书 以 党 












































的 JSON 结构 为 例 。 





























Charles 模拟 网 络 请 求 


52 


来 保存 模拟 数 























1 


y 
































ot 


居 。 模拟 数 据 可 以 根据 与 服务 器 端 约定 的 接口 文档 自行 编写 ， 也 可 以 二 














J. 






































的 网 络 接 




















的 返回 值 。 此 文件 被 记 为 mockjson， 如 图 12-9 所 示 。 
[CT Chares421- Session Tv 
四 区- 区. pCEYV 会 用 关 用 全 
RE Sequence Overview ~ Request Summary Chart Notes 
http://d.apicloud.com 到 
v Ml mem td， "5914e2faae5b8d506f651e33”， 


“mae”": "baiduLocoation", 

"app_count": 16686, 

“createdAt”: “2017-11-22702:37:46.0322", 
"updatedAt™: "2017-11-22702:42:01.9772" 


Y Mapl 
Todule?fiter=%7B3%22where%22%3A%7B%22name%22Y%3/ 


Copy Selection 
Base 64 Decode 


Copy URL 
Copy cURL Request 





Headers Text Hex JavaScript JSON JSON Text 








图 12-9 
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12.2.3 使 用 本 地 文件 作为 接口 返回 值 



















































































太 本 Ei WN 和 、 [1 » a 
键 点 击 想 定义 其 返回 值 的 接口 ， 选 择 “Mab Local..….”， 如 图 12-10 所 示 。 
S09 Charles 4.2.1- Session 1* 
下 sn a 角 HCEY 会 由 关上 用 因 
SET sequence Overview Request 古 TTTT Summary Chart Notes 
Y @ http://d,apicloud.com x 
v 冯 mem "id": wsal4e2faae5bBd5a6f651e33"， 
“name": "baiduLocation”, 
Y apl "app_counte 16686, 
EE Er reatecAt": “2917-11-22T92:37:46,0322", 
Copy URL "updatedht": "2017-11-22T702:42:01.9772" 
Copy cURL Request 
Copy Response 
Save Response,.. 
Find In,,.. 
Compose 
Repeat 
Repeat Advanced,.. 
Validate 
Publish Gist 


ViewRequestAs 。 
View Response AS 
Viewer Mappings... 


Show in Sequence 
SortBy > 





Headers Text Hex JavaScript JSON JSON Text Raw 








图 12-10 
































让 
Il 











在 新 打开 的 弹 ， 点 击 “Choose” 按 钮 ， 来 选择 7 来 作为 接口 返回 值 的 文件 mock. 


json， 如 图 12-11 所 示 。 





































































































适当 修改 mock.json 为 以 下 内 容 : 





[{ 
"id": "5al4e2faaeSb8d5a6f651e33", 
"name": "APICloud", 
app_ count™: 0999; 
rereatedat"s “20]7=11-22T702:37:46,.0322", 
"upadatedst™": "2017=11-22T02:42:01.9772" 

}] 



































|| 





















































此 时 在 App 中 重新 进行 网 络 请 求 ， 可 以 看 到 网 络 请 求 的 返回 值 已 经 发 生 了 变化 。 当 然 也 可 
以 在 Charles 中 ， 右 键 点 击 选中 某 个 网 络 请 求 ， 然 后 选择 “Repeat” 来 重新 发 送 一 次 网 络 请 求 ， 
如 图 12-12 所 示 。 























































































































Y @ hp/dapicioud.com 





1 mpdulo?flters3%7B%722where%27%3A%7B%22name%22 
| module?flter =%7B%22where%22%3A%76X%22name%22 
| module?fiter =XIB%22where%22%3A%7IB%22nsme%22 
| module?fpter NIB ~ 2 


modulerfiters%7 Copy URL B22 





12.2 ”调试 技巧 : 使 用 Charles 模拟 网 络 请 习 
Charieos 4.2.1 - Sevsion 1 * 
Y " a 9 Pll lie 全 | 关 @ 
| Soonce Overview Reques: NENW Summary Chart Norwes 
1 @ mapyidaplcloodcom 到 
“mem 13" “Sol4e2100e558d5061651e33", 
v scl "pane”; "baidutocation", 
“app_count”: 16686, 
mo MI WON22NNO N22RI RIN 。 “cre3tecAt: “2017 311-22102:37;46,0327", 
十 nupdatecdAt" “2017-11-22192:42:01.9772" 
LE Ed Mapoing 
Map From 
Protocok nttp 加 
Host: d.apicioud.com 
Port: 80 
Path: /mcryapymoduie 
Query: y%2C%22skip%22%3AOX2C%22mit%22%3A20%7D 
Nap To 
tocapom | ae 
© case-sensitive 
TD from 0 oath end 和 了 DiectDrs you TRUE end the path wh 9°. To ao 
an entye host eae the path bank 
2 on 国 E 汪 
Heeders Ton Hox JavaScript JSON JSON Text Raw 
12—11 
S99 Chares 4.2.1- Session 1* 
> rcCIvSLXS 
Sequence Overview ”Request Summary Chart Notes 


区 

"4d™: "Sn14e2f0ac5b5dS061651e33” 

“enee"! "APICUogdn 

"app_count"s $99, 

“erentedAt": “2017-11-22702:37:46,0322", 
1 "updntedAt": “2017-11-22702;42:01.0772" 


Heeders Text Hex Javascipt JS0N JSONText Raw 




















0000000 


12—12 


000000 https//yabook.org 
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12.3 调试 技巧 : 使 用 Safari 断 点 调试 i0S 应 用 


基于 APICloud 平台 开发 的 iOS 应 用 ， 如 果 选 择 使 用 develop 证 书 打包 ， 就 可 以 在 Safar 中 断 
点 调试 。 | 这 特 性 ， 前 端 发 可 2 观 ‘如 地 行 1OS 应 上 和 日 和 功能 的 精 旨 调整 。 





























































































































































































































12.3.1 从 APICloud 官 网 编译 安装 自 定义 AppLoader 


在 一 切 开 始 之 前 ， 开 发 者 需要 先 到 官网 控制 台 (module-loader) 编译 安装 自 定义 


AppLoader。 同 时 在 编译 前 ， 需 要 到 网 站 控制 台 将 证 书 蔡 换 为 develop 开发 证 书 。 


















































































































































12.3.2 显示 桌面 Safari 浏 览 器 的 “开发 ”菜单 




































































桌面 Safari 浏览 器 的 “开发 ”菜单 ， 默 认 是 隐藏 的 。 其 开启 方式 是 .点击 顶 部 菜单 一 Safari 一 
衣 好 设置 一 高 级 一 勾 选 “在 菜单 栏 中 显示 “开发 ”菜单 " ， 如 图 12-13 所 示 。 























































































































”由 ”Safari 文件 编辑 显示 历史 记录 Ls 窗口 ”帮助 
© 


rTQa00 


通用 ”标签 页 自动 填充 | 网 站 扩展 高 级 
智能 搜索 栏 : 显示 完整 网 站 地 址 
辅助 功能 : 字体 大 小 不 得 小 于 Y 
按 下 Tab 键 以 高 亮 显示 网 页 上 的 每 一 项 
按 下 Option-Tab 键 仅 高 亮 显示 文本 栏 和 弹出 式 菜单 。 
阅读 列表 : 自动 存储 文章 以 便 离线 阅读 


互联 网 插件 : 停 用 插件 以 节能 





样式 表 : 未 选择 
默认 编码 : 。 Unicode (UTF-8) 
代理 : 。 更 改 设置 .… 
在 菜单 栏 中 显示 “开发 "菜单 3 
图 12 一 13 


12.3.3 开局 i0S 设 备 的 Web 检查 器 功能 
iOS 系列 设备 的 Web 检查 器 功能 默认 是 关闭 的 ， 需 要 手动 
































Wolly 





其 方式 为 : 设 















































一 Safari 一 高 级 一 Web 检查 器 ， 如 图 12-14 所 示 。 





























12.3 ”调试 技巧 :使 用 Safari 断 点 调试 iOS 应 























运营 商 令 下 午 2:44 Cd 
《 Safari 高 级 
网 站 数据 


JavaScript 






@&) 
Web 检查 器 @&) 


若 要 使 用 “Web 检查 器 ”"， 请 使 用 Safari 并 从 ” 有 
问 "iPhone”"。 您 可 以 在 电脑 上 Safari 的 "高产 偏好 设置 中 启 
用 “开发 "菜单 。 


Experimental Features 











图 12 一 14 


12.3.4 把 待 调试 代码 同步 到 AppLoader 


在 调试 之 前 ， 开 发 者 需要 使 用 任意 一 款 APICloud 支持 的 开发 工具 ， 


手机 上 的 AppLoader 中 。 以 下 面 一 段 简单 的 代码 为 例 : 










































































[ 瑟 











己 要 调试 的 代码 同 












































<1dqoctype html> 

<html> 

<head> 
<meta charset="utf-8"> 
<meta name="viewport" 


content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0, initial-scale=1.0,width=device-— 
width"/> 











<meta name="format-detection" content="telephone=no,email=no,date=no,address=no"> 
<title> 使 用 safari 断 点 调试 ios 应 用 </title> 
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<style> 
body{ background-color: #f£f2f2f2; } 
</style> 
</head> 
<body> 
<div tapmode onclick="sayHi()">Hello APICloud</div> 
</body> 
<script type="text/javascript"> 
apiready = function(){ 
api.parseTapmode () ; 
过 
window.sayHi = function () { 
alert ("Hello APICloud") 
} 
</script> 
</html> 


12.3.5 ”Safari 晰 点 调试 10S 应 用 




































































数据 线 把 iOS 设备 与 电脑 连接 并 打开 APICloud 应 












































然后 就 能 在 桌面 Safari 浏览 器 


















































































































































发 ”菜单 中 看 到 自己 的 应 用 。 点 击 对 应 页 面 ， 即 可 开启 其 对 应 的 devtool 调试 窗口 ， 如 图 12-15 
所 示 。 
铝 ”Safari 文件 编辑 显示 历史 记录 书签 窗口 ”帮助 
O09 页 面 打开 方式 : > 一 UZApp 一 使 用 safari 断 点 调试 
ro We 用 户 代理 > 
te 
电 元 素 UZApp 
B mm) 回 bowy > | 使 用 safari 断 点 调试 iOS 司 
了 <html t le="-webkit-touch-callout ~webkit | 试验 性 功能 上 | 自动 显示 JSContext 的 网 页 和 
m -touc ‘out; mi H ~ 也 | 
hee /had er Li 进入 响应 式 设计 模式 自动 暂停 连接 到 JSContext 
和 <div pm onclick="sayHi()">Hello ee - - 
» <script type="text/javascript">-</script> 显示 片断 编辑 器 
bb epg 显示 扩展 构建 器 





清空 缓存 


停 用 图 像 
停 用 样式 
停 用 JavaScript 





RE 








12 一 15 





























在 Elements 中 点 击 某 个 DOM 元 素 ， 即 可 看 到 其 在 内 存 























实 的 CSS 布局 ， 如 图 12-16 所 示 。 















































12.4 调试 技巧 : 使 用 Chrome 断 点 调试 Android 应 229 























CE 现 丙 内 章 本 一 Simulator 一 UZApp 一 全 用 ter 匡 训 再 区 DS 看 用 
S © Di © Cr- 王家 
Ran 了 Dn Da | ms | Or | 国 ave 二 | 
四 nm 四 wo ov 和 0 王 7 ™ EE = 
vrs Stylo" -wedkit-touch-calleut: eone; -webkit-eser-select: nose;"> Mtve Foew Mover Vehee 
ere 
T 生性 全 类 可 地 
ex/ Javascr 本 -aebsit-tosth-caltovtT nenes 
> Rbkit-eserraetecti mner 
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图 12-16 























在 “Sources” 中 的 sayHi 方 法 内 部 打 一 个 断 点 ， 然 后 在 手机 上 点 击 “Hello APICloud” 按 钮 ， 
即 可 看 到 方法 走 到 了 断 点 里 ， 同 时 手机 应 用 的 运行 也 中 止 了 ， 如 图 12-17 所 示 。 
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12.4 调试 技巧 : 使 用 Chrome 断 点 调试 Android 应 用 


为 了 便于 前 端 开 发 者 进行 移动 应 用 的 开发 和 调试 ，APICloud 支持 使 用 Chrome 断 点 调试 
Android 应 用 。 因 此 基于 APICloud 开发 移动 App， 可 以 像 进行 Web 开发 一 样 便 损 
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12.4.1 从 APICloud 官 网 安装 AppLoader 


























































































































































































































在 开始 之 前 ， 开 发 者 需要 先 下 载 安装 官方 AppLoader 或 者 编译 安装 自 定义 AppLoader。 下 面 
的 操作 描述 ， 同 时 适用 于 官方 AppLoader 和 自 定义 AppLoader， 这 里 统一 使 用 AppLoader 指 代 。 
如 图 12-18 和 图 12-19 所 示 。 

. Download 





AppLoader ,wn 





现 的 APICloud 




















图 12-18 











身 定 义 Iloader 


© 介绍 











版 本 : 000 


央 本 : 000 


AnmirI ~ 




















图 12-19 























Chrome 断 点 调试 Android 应 








HH 














12.4 调试 技巧 : 使 用 





在 Android 手 机 上 开局 USB 调试 

























































































































































































































































































12.4.2 
Android 手机 需要 开启 USB 调试 功能 ， 一 般 是 在 “设置 ~ 开发 者 选项 ~ USB 调试 ”中 的 
， 如 图 12-20 所 示 。 目 前 大 部 分 Android 手机 都 是 默认 隐藏 开发 者 选项 的 ， 一 般 可 在 “设置 一 
我 的 设备 /关于 本 机 ”中 ， 通 过 快速 连续 多 次 点 击 Android 版 本 号 或 第 三 方 RROM 版 本 号 来 启 
发 者 选项 。 
另外 ， 还 需要 一 根 可 以 进行 传输 的 数据 线 用 于 手机 与 电脑 的 连接 。 
图 12 一 20 
12.4.3 把 竺 调试 代码 同步 到 AppLoader 
1 要 调试 的 代码 同 





















































在 调试 之 前 ， 开 发 者 需要 使 用 任意 一 款 APICloud 支持 的 开发 工具 ， 把 E 
步 到 手机 上 的 AppLoader 中 。 以 下 面 一 段 简单 的 代码 为 例 : 

























































































<!doctype html> 
<html> 


<head> 
<meta charset="utf-8"> 


<meta name="viewport" 
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yp 


content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0, initial-scale=1.0,width=device-width"/> 
<meta name="format-detection" content="telephone=no,email=no,date=no,address=no"> 




















<title> 使 用 Chrome 断 点 调试 Android 应 用 </title> 
<style> 
body{ background-color: #f£f2f2f2; } 
</style> 
</head> 
<body> 
<div tapmode onclick="sayHi()">Hello APICloud</div> 
</body> 
<script type="text/javascript"> 
apiready = function(){ 
api.parseTapmode ();，; 
}; 
window.sayHi = function () { 
alert ("Hello APICloud") 
} 
/seript> 
</html> 


12.4.4 在 Chrome 中 上 断 点 调试 













































































在 上 述 步 又 准备 就 结 以 后 ， 在 Chrome 的 调试 工具 devtool 




















devices， 即 可 看 到 自己 的 Android 设备 ， 如 图 12-21 和 图 12-22 所 示 。 



































民 是 Elements Console Sources Network ”Performance Memory 
IDOCTYPE html 


<html lang="zh-CN"> | be) h 


> <head>-</head> | Fiter 
v<body class="init des-mat” style="background: | 
—webkit~image-set(url("chrome-search://theme/ |etement,style { 


IDR_THEME_NTP_BACKGROUND? } 
ebdgijnbkbbklimahaehhhdcjfckbeic") 1x, hem1 1 
urll"chrome-search;//theme/ 

IDR_THEME_NTP_BACKGROUND@2x7 Animations 


ebdgijnbkbbk limahaehhhdcjfckbeic") 2x) center Coverage 
center no-repeat rgb(255, 255, 255);"> 


<div id="prpd"></div> JavaScript Profiler 
p<div class="h" id="mngb">-</div> Layers 
<span id="prt"></span> Legacy 
vediv id="_Alw"'> en 
p<div class 1d="1ga">.</div> Network conditions 
b <form action="/search”" id="f" method= Quick source 


“get">-</form> 
bp<div class="spch s2fp-h" style="display: 
none” id="spch">.</div> 
v<div class="mv-hide” id="most-visited” 
v<div id="mv-tiles” style="width: 

0 
Y <iframe id="mv-singte” srcs 





v#document 
<!DOCTYPE htmt> 
os p<html>-</html> == $0 
</iframe> 
</div> 

p<div class="my-noti-hide” id="mv-noti">. 
</div> 
p<div class="my-noti-hide” id="mv-noti— 
error'>-</div> 





</div> 
p<div id="prm-pt">-</div> 
</div> 
.most-visited =#tmv-ties Hmv-single 上 7 


Application 少 Se 
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Show console drawer Esc 
Search all files BUF 
Open file %P 
More tools 

Shortcuts 

Settings Fi 
Heip > 














2 一 2 


























选择 More tool 一 Remote 


















































-IT 





点 击 某 个 页 面 右 侧 的 Insepect 即 可 在 电脑 上 查看 手机 上 局 
为 需要 连接 国 夕 的 服务 器 ， 如 图 12=23 所 示 。 






























































的 界面 。 第 一 次 打 
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Console Network conditions Rendering Remote devices x What's New 


MI 6 #41ab6of 
Devices 
| MI6 WebView in com.apicloud.apploader (58.0.3029.83) 
® Connected 
使 用 Chrome 断 点 调试 Android 应 






/storage/em! , 0668623: 















































































所 示 。 


[49 9 
在 “Sources 










































































的 sayHi 方 法 内 部 打 一 个 断 点 ， 然 后 在 手机 上 点 
































即 可 看 到 进程 运行 到 断 点 处 ， 同 时 Android 手 机 应 用 的 运行 也 停止 了 ， 妇 




















图 
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eas Developer Tools - file:///storage/emulated/OJUZMap/wgt/A6066862334734/index.html 
€ 3 C fle/storage/emulated/O/UZMap/wgy| [RW 加 |] | Eements Audits Console Sources Network Performance » 
S ra 
Hego APICloud | <head>_</hesd> 
Y<body> == $0 
<div tapmode onclick="sayHi(})">Hello APICLoud</div> 
Y<script type="text/javascript"> 
apiready = function(){ 
api,parseTapmode(); 
window. sayHi = function () { 
} alert("Hello APICLoud") 
</script> 
</body> 
</html> 
| 
Lhiml EE 
Styles Event Listeners DOM Breakpoints Properties 
| 
| Filter :shov .cls ba 
lelement, style { 
上 
|body { jndexshtmti9 
| background-cotor: Dhsl(0, 0%, 95%); 
} 
body { user agent Stytesheet| 
12 一 23 
在 Elements 中 点 击 某 个 DOM 元 素 ， 即 可 看 到 其 在 内 存 实 的 CSS 布局 ， 





上 “Hello APICloud” 按 和 


12--25 和 图 





如 图 12-24 
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12-26 所 示 。 
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Script type="text/jovascript 
apiready = function(){ 
apivparseTapaodef]; 


六 
Window,sayHi = function () { 
} alert("Hello APICtoud") 


</script> 
</body> 
</htnl> 





nm boy EE 
| Styies Evont Latoners DOM Breskpoints Properties 
Fiter ihov .els + 





element, style { 

人 

div{ user agent stylesheet 
} display; block; 

| | 





Pier BShow all 





图 12-24 





<title> 便 网 Chrose roid 应 刚 </title> 
<style> 
body{ background-color: #121212; 》 
</style> 
</head> 


i tapaode onclick="sayHi()">Hello APICLoud</d 
<seript type="text/javascript"> 
aptready = function(){ 

3 api.parseTapeode(); 


CL 
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12.5 小结 
本 章 介绍 了 App 开发 的 常用 调试 技巧 ， 包 括 




















竺 调试 过 程 
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也 欢迎 在 开发 社区 中 进行 分 享 。 




















进行 调试 等 。 这 些 技 巧 可 以 加 快 开发 速度 ， 更 容易 定位 并 修复 问题 。 如 果 读 者 有 好 的 


如 何 抓 包 获 取 数 据 、 如 





何 打 断 点 
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这 一 部 分 将 向 读者 介绍 APICloud 针对 不 同行 业 提 供 的 解决 方案 。 
































不 同类 型 和 规模 的 企业 ， 对 混合 App 技术 开发 的 B2B、B2C 和 B2E 类 型 的 移动 应 用 的 需求 ， 


要 远 超市 场 的 预期 和 想 


象 
正如 我 们 所 说 ， 基 本 上 各 大 银行 、 保 险 公 司 、 烟 草 、 电 力 、 航 空 、 铁 路 、 家 电 制 造 、 食 品 、 




















































































































































































































































































































































































































零售 等 行业 的 领军 型 企业 ， 都 大 量 地 使 用 混合 模式 App 技术 来 开发 和 管理 自己 的 App。 人 们 不 
禁 要 问 “ 为 什么 这 些 有 足够 的 预算 和 开发 资源 的 公司 和 企 事业 单位 ， 选 择 混合 模式 App 开发 技 
术 作为 企业 互联 网 化 的 支撑 ? “， 在 印象 中 ， 混 合 模式 技术 和 原生 技术 相 比 ， 不 管 从 用 户 体验 还 
是 能 力 角度 都 有 差距 。 答 案 其 实 和 企业 的 互联 网 化 及 数字 化 的 需求 有 最 直接 的 联系 。 以 下 4 个 
方面 ， 决 定 了 越 是 有 实力 的 企业 越 需 要 混合 模式 App 开发 技术 ， 包 括 对 速度 的 要 求 、 业 务 灵活 
性 的 要 求 、 集 中 管理 的 要 求 和 信息 化 安全 的 要 求 。 这 些 也 恰恰 是 混合 App 模式 形成 了 不 同行 业 




























































































内 方案 的 根本 优势 以 及 企业 选择 的 必要 性 所 在 。 
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第 13 章 


如 何 快速 开发 一 蒜 IoT App 





主要 内 容 

本 章 介 绍 了 如 何 使 用 APICloud 来 创建 一 款 IoT 类 App。 
学 习 目 标 

(1) 了 解 IoT 类 App 的 功能 和 分 类 。 

(2) 了 解 IoT 类 App 的 技术 架构 。 

(3) 了 解 在 IoT 类 App 中 经 常 使 用 的 API。 

(4) 了 解 IoT 类 App 的 开发 步骤 。 
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Ea 











13 章 ”如何 快速 


发 


款 IoT App 


13.1 IoT App 的 分 类 和 功能 




















































































































物 联 网 是 未 来 的 发 展 趋势 ， 随 着 越 来 越 多 智能 硬件 的 产生 ， 人 类 将 进入 到 万 物 互联 的 时 代 ， 
移动 化 与 物 联 网 相 结 合 是 非常 重要 的 环节 ， 因 为 智能 设备 同样 需要 人 机 交互 和 用 户 体验 ， 所 以 
大 多 数 的 物 联网 企业 会 选择 开发 一 款 IoT App 作为 连接 用 户 和 自己 产品 的 桥梁 。 

















13.1.1 IoT App 的 分 类 























前 常见 的 IoT App 类 型 

















I 准 开 I 











和 # 



























































主要 包括 涉及 智能 家 


























具体 介绍 如 下 。 








联网 等 6 大 类 型 。 

















制 、 预 约 设 

















智能 家 居 : 将 App 配合 物 联 
等 功能 。 如 各 





居 、 穿 戴 设备、 














和音 | 改 
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医疗 健 





拟 、 


测 、 城 市 





贰 十 . 
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使 用 ， 





可 实现 


对 智能 设备 的 信息 





、 远 程控 




















穿戴 设备 : 可 上 


的 智能 手 











统 讨 
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户 做 运动 





户 的 心率 、 运 动 步 数 等 信息 ， 为 























日 能 手 环 。 
医疗 健康 : 硬 人 
App 上 实时 展示 


芭 





备 通过 








EL 





展示 。 
环境 监测 : 


可 以 将 污染 


超标 等 相关 报警 信息 发 








牙 与 App 进行 关联 ， 可 以 将 


风险 规 


证 
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以 ， 比 如 常见 
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心跳 等 信息 在 























改 好 
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实时 监测 环 


境 的 PM 值 、 
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湿度 














App 





























城市 管理 : 可 以 ; 








季 数 据 通知 给 相关 部 门 ; 
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感 器 ， 包 括 文 物 








车 联网 : 与 帮助 


它 丰 

















行驶 有 关 的 应 用 
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例如 在 城 











7 的 公共 设施 上 安 
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、 应 急 调 度 、 

















13.1.2 IoT App 的 主要 功能 


一 款 物 联网 App 如 



































承载 其 商业 模式 ， 从 总 体 功能 








期 运 














iz. (此 
人 慑 实 
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和 运行 控制 ， 在 这 个 核心 功能 
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能 。 所 以 一 款 IoT App 从 功能 规 蕊 











| 不 大 ， 只 不 过 IoT App 的 核心 功能 是 设 


款 互 有 
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I 上 5 
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所 示 。 


一 个 IoT App 可 以 分 为 3 个 版 本 迭代 
版 本 主要 实现 App 对 设 
本 可 以 增加 情景 模式 、 数 





层级 : 核心 功能 、 
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展 功能 和 高 级 功能 。 








如 
































的 管理 和 运行 






























































时 统计 展示 等 功 











交通 信息 等 。 





图 13-1 
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体验 ， 以 及 售后 服务 等 基础 运营 的 功能 ; 3.0 版 本 增加 增强 用 户 寿 性 和 商业 模式 的 相关 功能 ， 如 
行业 资讯 、 用 户 社 区 、 电 商 系统 等 。 


13.2 IoT App 的 技术 架构 


13.2.1 两 方 通信 和 架构 

App 与 智能 设备 直接 进行 双向 通信 。 这 种 两 方 通信 的 架构 需要 App 和 智能 设备 之 间 实 现 
定义 的 通信 协议 ， 智 能 设备 的 数据 直接 上 报到 App，App 对 设备 的 控制 指令 也 直接 发 送 给 智能 
设备 。 目 前 的 通信 协议 APICloud 支持 基于 蓝牙 和 Wi-Fi 下 的 Socket 两 种 方式 ， 如 图 13-2 所 示 。 
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1 \ 
全 ~、\ 
1 "WHR : Socket 
1 
1 六 览 牙 : 蓝牙 3.0/4.0 Beacon 
EEC / 
备 瑟 设备， 内 置 蓝 计 /WEHFI 模 块 客户 站 


图 13 一 2 


13.2.2 三 方 通信 架构 


三 方 通信 架构 需要 在 智能 设 及 务 端 之 间 实 现 自 定义 的 通信 协议 ， 智 能 设备 与 服务 器 之 
间 通 过 Socket 建 立 稳定 的 连接 通道 ， 通 过 远程 的 连接 实现 数据 上 报 和 指令 控制 ， 如 图 13-3 所 示 。 
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© 多 全 
名 
下 
~ Wi-Fi I 
1 Socket 
et 
1 
国 eR 。 蓝牙 3.0/4.0 Beacon 
ERROR 六 
智能 设备 。 内 置 蓝 开 /wi-Fi/GpRs 模 所 害 户 问 
图 13-3 


D0000000000000 https//yabook.org 














242 第 13 章 如 何 快速 开发 一 款 IoT App 























。 Wi-Fi 或 者 GPRS 模式 : 当 App 去 操控 智能 设备 时 ， 会 通过 Http 或 者 Socket 协议 发 送 
指令 到 业务 服务 端 ， 服 务 端 接收 到 指令 后 将 该 指令 下 发 到 智能 设备 端 ， 智 能 设备 接收 
到 指令 并 做 出 反馈 ， 再 通过 UDP 或 者 TCP 协议 将 信息 上 报到 服务 端 ， 服 务 端 接收 到 
反馈 的 数据 下 发 到 App 进行 展示 。 

。 蓝牙 模式 : 智能 设备 和 App 通过 蓝牙 或 者 Beacon 协议 建立 连接 通道 ， 智 能 设备 通过 该 
连接 通道 将 数据 上 报 给 App，App 通过 Http 或 者 Socket 将 数据 提交 到 服务 端 ， 服 务 端 

通过 分 析 处 理 将 数据 下 发 到 App 进行 展示 ; 用户 可 以 通过 App 的 数据 展示 ， 发 送 指 令 


到 智能 设备 ， 对 设备 进行 操控 。 


















































































































































































































































































































































13.2.3 ”四方 通信 架构 

“App+ 智能 硬件 + 数据 通信 平台 + 业务 服务 端 ”这 种 四 方 通信 的 架构 不 需要 实现 智能 设 
和 数据 通信 平台 之 间 的 协议 ， 以 及 客户 与 智能 设备 之 间 的 协议 ， 提 供 IoT 解决 方案 SDK 的 平台 
已 经 帮助 开发 者 将 协议 封装 完成 ， 如 图 13-4 所 示 。 
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智能 设备 :内置 蓝牙 /Wi-Fi/GPRS 懂 块 客户 站 


13—4 


















































。 Wi-Fi 或 者 GPRS 模式 ， 集成 了 Wi-i 或 者 GPRS 模块 的 智能 设备 和 数据 通信 平台 通 
过 Socket( 或 者 数据 平台 封装 好 的 协议 ) 建立 稳定 的 通信 通道 ， 智 能 设备 会 把 数据 上 报 
给 数据 通信 平台 ， 然 后 业务 服务 端 和 数据 通信 平台 通过 Http 协议 进行 对 搂 。 在 业务 服 
务 端 经 过 信息 处 理 后 ， 将 数据 下 发 到 App 进行 展示 ， 当 用 户 需 要 操控 智能 设备 时 ， 
以 通过 App 发 送 指令 到 业务 服务 端 或 者 直接 发 送 指令 到 数据 通信 平台 ， 当 业务 服务 端 
区 收 到 客户 端 指令 后 ， 会 将 指令 通过 Http 发 送 到 数据 通信 平台 ， 数 据 通信 平台 再 

平台 封装 好 的 协议 或 者 Socket 将 指令 下 发 到 智能 设备 。App 发 送 指令 到 数据 通信 平台 ， 
















































































































































































































































































































































































































































































13.3 ”IoT App 中 高 频 使 用 的 API 






























































数据 通信 平台 将 指令 发 送 到 智能 设备 ， 智 能 设备 返回 数 


平台 将 设备 数据 返回 到 App 进行 展示 。 








am 
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。 蓝牙 模式 : 集成 了 蓝牙 模块 的 智能 设备 通过 平台 封装 的 协议 或 者 蓝牙 、Beacon 等 了 
多 
竹 


过 提交 到 数据 通信 平台 ， 当 数据 上 传 到 业务 服务 端 时 ， 业 务 服务 端 会 跟 数据 通信 和 
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| 数据 通信 平台 ， 数 据 






























































台 办 议 
将 数据 传递 给 App，App 获取 到 设备 数据 后 通过 Http 或 Socket 上 传 到 业务 服务 端 或 者 


区 全 














站 






































上 
了 ii 于 








对 接 ， 并 把 设备 信息 通过 Hetp 协议 下 发 到 数据 通信 






























































贵 ， 并 把 数据 反馈 到 App 进行 展示 。 


13.3 IoT App 中 高 频 使 用 的 API 










































































IoT 类 App 中 被 高 频 使 用 的 模块 API 分 为 “界面 组 件 ”“ 功 能 志 















































务 和 人 






























































分 别 表示 App UI 层面 组 件 调用 ， 功 能 层次 方面 的 实现 和 对 接 第 三 方 














类 如 图 13-5 所 示 。 





界面 图 表 控制 按钮 进度 条 
名 
组 件 城市 列表 日 历 视频 播放 
功能 (三维 码 3 WPF 连 接 语音 识别 
扩展 定位 权限 管理 Socket 通 信 
开放 Wi-F| 模 块 3G /4G 模块 蓝牙 
服务 推送 客服 支付 
13-5 


13.3.1 界面 组 件 类 模块 























放 服 务 ” 等 3 类 


台 ， 数 据 通 信 平 台 再 做 出 反 





记 





放 的 服务 等 内 容 ， 详 旨 














刀 





时 间 选 择 器 
动画 效果 
闹钟 
加 密 


Beacon 


统计 








界面 组 件 类 模块 主要 是 为 了 实现 App 静态 界面 的 组 成 封装 而 成 的 ，IoT 类 项 目 界 面 组 件 模 


























块 的 使 用 主要 有 以 下 几 种 。 





































































































































































































。 进度 条 : APICloud 提供 样式 丰富 的 进度 条 模块 ， 开 发 者 可 以 自 定义 进度 条 颜色 和 背景 
色 。 在 IoT 类 应 用 中 可 用 于 App 与 智能 硬件 连接 时 的 加 载 展示 。 
。 时 间 选 择 : APICloud 提供 样式 丰富 的 时 间 选 择 器 模块 ， 可 在 App 端 通过 时 间 选 择 器 设 















































智能 设备 的 运作 时 间 、 定 时 开关 机 等 一 系 丈 











的 操作 。 



























































。 城市 列表 : APICloud 提供 了 城市 列表 模块 ， 可 方便 快捷 地 集成 到 项 目 中 ， 支 持 输入 
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称 搜索 城市 ， 以 及 根据 索引 查找 城市 ， 在 IoT 类 应 使 用 频率 较 高 ， 一 般 是 通过 指定 
城市 名 称 然 后 获取 到 该 城市 周边 信息 或 者 天 气 包 
。 图 表 : APICloud 提供 样式 丰富 的 图 表 模 块 ， 包 含 曲线 图 、 柱 状 图 、 饼 状 图 等 ， 在 IoT 
类 应 用 中 使 用 频率 较 高 ， 多 为 数据 分 布展 示 或 用 于 统计 分 析 ， 比 如 检测 一 段 时 间 空 调 、 
冰箱 的 温度 变化 ， 统 计 各 个 家 用 电器 的 使 用 频率 等 。 
。 控制 按钮 : APICloud 提供 样式 丰富 的 控制 按钮 模块 ， 支 持 开 关 按 钮 、 手 势 滑动 等 模块 ， 
该 模块 在 IoT 类 应 用 中 被 普遍 使 用 ， 通 常 使 用 场景 是 在 App 端点 击 或 者 滑动 按钮 对 智 
能 硬件 设备 进行 数据 的 操控 。 
。 日 历 : APICloud 提供 了 样式 丰富 的 日 历 模 块 ， 在 IoT 类 应 历 模 块 的 使 用 频率 较 
高 ， 比 如 当 智 能 设备 与 手机 关联 上 之 后 ， 可 以 在 日 期 上 标注 每 天 智能 设备 使 用 的 一 些 
信息 或 者 其 他 的 一 些 操 作 。 
。 视频 播放 : APICloud 提供 了 多 款 视 频 播 放 模 块 ， 一 般 在 IoT 类 应 用 场景 中 多 为 智能 设 
的 使 用 教程 ， 或 者 向 用 户 展示 一 些 情景 模式 。 
。 动画 效果 : APICloud 提供 了 丰富 的 动画 效果 模块 ， 在 IoT 类 应 使 用 动画 效果 可 提 
升 App 端的 用 户 体验 。 
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13.3.2 功能 扩展 类 模块 
功能 扩展 类 模块 主要 是 为 了 实现 App 的 主体 业务 功能 封装 而 成 的 ，IoT 类 型 的 项 
展 模 块 的 使 用 主要 为 以 下 几 种 。 
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。 语音 识别 : APICloud 提供 了 语音 识别 模块 ， 开 发 者 只 需 调用 此 模块 即 可 实现 语音 识别 、 
语音 朗读 等 相关 功能 。 语 音 识别 模块 在 IoT 类 应 的 常用 场景 是 ， 通 过 语音 发 送 指 
令 ， 设 备 接收 到 指令 后 再 作出 反馈 。 

。 加 密 模 块 : APICloud 提供 了 加 密 模块 ， 有 的 模块 里 每 个 接口 都 实现 了 同步 和 异步 两 
方法 。 开 发 者 可 按 需 求 自行 选择 接口 调用 。 在 IoT 类 应 用 中 使 用 频率 较 高 的 通常 是 在 客 
户 端 发 送 指令 或 是 与 服务 端 通信 时 进行 加 密 处 理 ， 以 防 指令 被 窃取 。 

。 定位 模块 : APICloud 封装 了 百度 、 高 德 地 图 SDK， 可 以 通过 定位 模块 获取 当前 经 纬度 ， 通 
过 经 纬度 获取 到 当前 位 置 以 及 周边 信息 ， 也 可 以 通过 该 模块 进行 导航 路 线 规划 ， 或 是 在 

到 上 展示 周边 智能 设备 的 数量 以 及 位 置 ， 结 合 导航 功能 抵达 距离 自己 最 近 的 智能 设备 。 

。 二 维 码 扫 描 : APICloud 提供 了 二 维 码 扫 描 模块 ， 以 FNScanner 为 例 ， 该 模块 可 以 解析 二 
维 码 以 及 条 形 码 ， 在 IoT 类 应 使 用 频率 较 高 ， 其 使 用 场景 一 般 是 通过 手机 App 打 

维 码 扫 描 功 能 ， 进 而 和 智能 硬件 设备 进行 关联 。 

。 Wi-Fi 连接 : APICloud 提供 Wi-Fi 连接 模块 ， 可 以 通过 该 模块 获取 当前 设备 连接 Wi-Fi 

的 sid， 并 连接 到 指定 的 Wi-Fi。 在 IoT 类 应 用 中 使 用 频率 较 高 的 模块 通常 是 在 App 

获取 指定 的 Wi-Fi 并 进行 连接 。 
























































































































































































































































































































































































































































































































































































































































































































































































































































































































































。 闹钟 : APICloud 支持 闹钟 功能 ， 提 供 了 AlarmNotification 模块 ， 该 模块 封装 了 定时 本 地 






































通 和 


醒 可 取消 ， 并 可 设 定 震动 、LED 等 参数 。 太 








提醒 功能 ， 开 发 者 可 以 根据 需要 设 定 在 一 定时 间 
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后 触发 本 地 通知 提醒 ， 设 定 的 提 






























































智能 设备 定时 开关 等 应 


。 权限 管理 : APICloud 提供 了 权限 管理 模块 ， 





场景 。 
































E IoT 类 应 使 用 频率 较 高 的 一 般 为 设 




































































如 定位 、 蓝 牙 访问 、 
App 端 需要 通过 蓝牙 关联 和 


























可 以 通过 该 模块 选择 开通 指定 的 权限 ， 例 






























































历 、 





麦 元 风 = 于。 权限 





As 理 了 












































9 能 设备 ， 此 时 就 


本 局 












































让 手机 端的 蓝 





y 使 用 频率 较 高 ， 比 如 
牙 











no 
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Oo 


3 
能 。 在 IoT 类 也 是 应 








需要 使 用 语音 操控 智能 
。 Socket 通信 
封装 了 Socket 的 创建 、 








: APICloud 封 



































更 件 设备 ， 此 时 需 开启 麦克 风 权 限 等 
装 了 Scoket 通信 协议 ， 


于 权限 ;或 者 App 端 
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人 SocketManager 模块 为 例 ， 该 模块 
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.3 开放 服务 类 模块 











关闭 、 发 送 数据 等 操作 ， 使 
[ 较 多 的 协议 之 一 。 



























































放 服 

















类 模块 主要 是 为 了 集成 第 三 方 服务 功能 






































e。 Wi-Fi : APICloud 提供 了 


主要 有 以 下 几 种 。 














云 为 例 ， 它 的 云端 支持 


多 家 Wi-Fi 模块 的 




















放 平 








此 模块 能 实现 即时 通信 数据 收发 

















里 装 而 成 的 ，IoT 类 项 放 服 务 模块 的 




















人 台 ， 比 如 机 智 云 、 庆 科 等 ， 以 机 智 























虚拟 设备 调试 ， 只 需要 通 














过 集成 了 机 智 云 SDK 的 客户 ， 去 扫 接 




















云端 的 设备 二 维 码 即 可 3 





行 虚 拟 调试 ， 大 大 节约 ] 





e。 统计 : APICloud 提供 了 了 



































的 数据 统计 模块 ， 例 如 





周期 

































































友 盟 、 
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百度 统计 等 ， 该 模块 在 IoT 
















































































































































































































































































































































































































































































































































































应 使 用 频率 较 高 。 客 户 端 统计 可 以 统计 用 户 经 常 点 击 的 模块 、 在 线 时 长 、 使 
频率 、 下 载 渠 道 等 ， 数 据 分 析 可 以 统计 到 用 户 使 用 某 一 个 智能 设备 的 频率 和 时 长 ， 通 过 
分 析 可 以 给 用 户 提供 一 个 更 为 合理 、 节 能 的 使 用 建议 。 

。 推送 : APICloud 提供 了 多 家 消息 推送 平台 ， 例 如 极光 推送 、 个 推 、 腾 讯 信鸽 等 ， 推 也 
模块 在 IoT 类 应 用 中 使 用 频率 较 高 ， 应 用 场景 通常 是 ， 当 智能 设备 出 现 问题 或 需要 反馈 
信息 到 客户 端 时 ， 会 发 送 指令 到 服务 端 再 由 服务 端 推 送 消 息 给 客户 端 ， 以 便 用 户 可 以 
及 时 接收 到 智能 硬件 设备 的 信息 反馈 。 

。 支付 : APICloud 提供 了 丰富 的 支付 模块 ， 例 如 支付 宝 、 微 信 、 银 联 等 ， 集 成 简单 、 方 

发 者 使 用 。 在 IoT 类 应 用 中 使 用 频率 较 高 的 场景 一 般 多 为 扩展 商城 模式 ， 可 以 在 智 








能 设备 App 端的 商城 
e 客服 : APICloud 提供 了 


































































































通过 支付 模块 来 购买 智能 硬 f 















































其 在 IoT 模块 中 使 





的 客服 模块 ， 例 如 美 洽 、 





或 者 其 
KF5、 


他 物品 。 





















































频率 较 
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集成 在 IoT 类 应 用 中 ， 









































e 3G/4G : APICloud 


外 车 的 智能 锁 ， 通 过 手 


享 辣 





供应 商 在 第 一 时 间 取得 联系 ， 可 以 是 售 前 咨询 ， 














提供 3G 

















高 的 应 





网 易 七 鱼 等 ， 该 模块 能 快速 
场景 多 为 在 App 端 与 智能 











th 可 上 














是 售后 服务 。 
































/4G 模块 ， 该 模块 在 IoT 
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也 是 比较 常见 的 ， 例 如 共 
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客户 端 扫描 二 维 码 即 可 解锁 。 
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。 蓝牙 : APICloud 提供 了 蓝牙 通信 和 模块， 支持 蓝牙 3.0/4.0; 蓝牙 在 IoT 类 应 用 中 也 是 使 
频率 较 高 的 模块 之 一 ， 通 常 应 用 场景 是 与 集成 了 蓝牙 模块 的 智能 硬件 进行 配对 和 通信 。 
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。 Beacon : APICloud 提供 Beacon 技术 ， 以 开放 平台 智 石 为 例 ， 该 平台 提供 了 基于 蓝牙 4.0 下 
发 的 新 一 代 近 场 通信 技术 。 在 IoT 类 应 用 中 使 用 频率 较 高 的 一 般 为 室内 导航 定位 等 场景 。 

















































































































处 上 这 些 IoT 类 应 用 的 最 核心 功能 在 APICloud 平台 上 都 已 经 有 现成 的 模块 了 ， 使 
APICloud 开发 一 款 IoT 类 应 用 只 需要 按 需 求 搭建 自己 应 用 的 UI 界面 并 实现 自己 的 业务 逻辑 即 
可 ， 基 本 上 所 有 核心 的 功能 模块 APICloud 都 已 经 提供 了 。 



























































































































































13.4 如 何 使 用 APICloud 开发 一 款 IoT App 


在 APICloud 平台 开发 IoT App 的 步骤 如 下 。 
























































(1) 首先 在 APICloud 平台 创建 应 用 : 详 见 本 书 1.2.2 小 节 。 







































































(2) 配置 应 用 的 图 标 、 启 动 页 、 编 译 证 书 等 : 详 见 本 书 1.2.5 小 节 ，7.4 节 。 

























































































(3) 添加 需要 使 用 的 IoT 相关 模块 : 13.3 节 做 了 详细 的 描述 ， 可 供 参 考 ， 具 体 如 何 添加 详 
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(4) 在 开发 工具 中 调用 APICloud 模块 的 API 实现 功能 以 及 业务 逻辑 : 详 见 本 书 6.4 节 。 












































(5) 在 开发 工具 中 提交 代码 到 APICloud 平台 : 详 见 本 书 1.2.3 小 节 。 









































(6) 在 平台 编译 生成 Android 和 iOS 应 用 安装 包 : 详 见 本 书 第 7 章 



































13.5 ”小结 





























在 APICloud 平台 上 开发 一 款 IoT 类 型 的 App 是 非常 方便 的 ， 因 为 APICloud 平台 已 经 提供 
了 IoT App 中 最 常 使 用 的 功能 模块 和 API。 更 多 使 用 APICloud 平台 开发 的 IoT App 案例 可 以 访 
问 平台 官网 一 案例 一 开发 案例 一 IoT 查看 。 















































































































































第 14 章 


如 何 快 速 开发 一 球 教 育 App 











主要 内 容 

本 章 介 绍 了 如 何 使 用 APICloud 来 创建 一 款 教育 类 App。 
学 习 目 标 

(1) 了 解 教育 类 App 的 功能 和 分 类 。 

(2) 了 解 教育 类 App 的 技术 架构 。 

(3) 了 解 在 教育 类 App 中 经 常 使 用 的 API。 

(4) 了 解 教育 类 App 的 开发 步骤 。 
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14.1 教育 App 的 分 类 和 功能 


































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































教育 行业 是 社会 不 可 缺少 的 硬性 要 求 ， 无 论 是 过 去 、 现 在 、 还 是 未 来 ， 提 高 教育 机 制 
是 我 们 面临 的 挑战 和 国家 发 展 的 重要 元 素 。 互 联网 教育 在 此 背景 下 应 运 而 生 ， 人 们 不 只 是 通过 
PC 端 去 学 习 以 提 升 自己 的 能 力 ， 也 需要 在 移动 端 产品 中 来 享受 便携 的 空前 盛宴 。 移 动 端 产品 能 
够 随时 随地 使 用 ， 不 断 提高 自己 ， 不 但 节省 了 时 间 ， 也 会 让 自己 快速 地 融入 到 学 习 中 去 ， 大 多 
数 教育 方面 的 企业 会 选择 开发 一 款 教育 类 App 作为 自己 企业 的 招牌 和 吸金 石 。 

14.1.1 教育 App 的 分 类 
前 常见 的 教育 App 类 型 主要 包含 在 线 教育 类 、 学 生 解 题 类 、 语 言 学 习 类 、 行 业 考试 类 和 
儿童 早教 类 等 5 大 类 型 。 

。 在 线 教育 类 : 在 线 教育 类 产品 发 展 的 轨迹 是 最 早 的 ， 主 要 在 于 优秀 课程 和 讲座 视频 ， 内 

容 质量 的 好 坏 非常 重要 ， 移 动 端 更 能 体现 专业 水 平和 受 欢 迎 程度 。 

。 学 生 解 题 类 : 通过 拍照 搜索 题目 答案 、 在 线 答疑 、 类 似 题目 供给 、OCR 识别 准确 率 、 

题库 收集 、 智 能 匹配 等 ， 这 类 App 产品 用 户 量 应 该 是 最 多 的 。 

。 语言 学 习 类 : 语言 单词 解释 、 听 写 、 听 读 ， 在 学 习 的 过 程 中 穿插 有 趣 的 视频 和 音频 做 为 

单词 的 释义 等 ， 这 类 APP 能 让 用 户 的 使 用 体验 感 大 幅度 增加 。 

e。 行业 考试 类 : 通过 视频 教育 学 习 、 培 训 等 课程 来 进行 在 线 考试 等 功能 ， 实 现 真正 的 自我 

评价 与 评估 ， 这 类 APP 可 以 让 用 户 更 加 贴切 的 认 知 自己 我 成 长 。 

。 儿童 早教 类 : 针对 于 儿童 设计 的 教育 ， 不 管 是 绘画 、 音 乐 等 艺术 方面 的 教育 ， 还 是 数 

学 、 天 文 等 文化 方面 的 教育 ， 儿 童 教育 类 App 质量 好 的 还 是 凤毛麟角 ， 所 以 用 户 会 
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重 这 类 App 的 上 架 反 馈 。 


14.1.2 教育 App 的 主要 功能 
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能 是 产品 导向 和 服务 令 





App 实际 差别 不 大 ， 只 不 过 教 
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个 教育 App 可 以 分 为 3 个 版 本 迭 














域 ， 在 这 个 核心 功能 
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14-1 所 示 。 
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1.0 版 本 主要 实现 
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做 题 等 功能 ; 2.0 版 本 可 以 增加 教学 互动 和 用 户 之 间 竞 赛 来 提升 用 户 体验 ， 并 增加 直播 功能 以 达 
到 身 临 其 境 的 教学 体验 ; 3.0 版 本 增加 增强 用 户籍 性 和 商业 模式 等 相关 功能 ， 如 社交 功能 、 用 户 


让 区 、 昌 商 系统 等 。 
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社交 层次 可 以 通过 好 友 关 系 来 增加 用 户 之 间 的 交流 ， 分 享用 户 自身 的 学 习 经 验 等 来 展现 ， 社 
又 类 似 于 百度 贴吧 等 交流 学 习 平 台 ， 可 以 从 中 交流 经 验 、 分 享 学 习 乐 趣 等 。 电 商 系统 可 以 提供 购 
买 在 线 音 视频 课程 、 题 目 ， 或 者 书籍 、 教 学 教具 等 实物 ， 或 者 其 他 相关 的 一 系列 产品 等 服务 。 
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14.2 教育 App 的 产品 架构 


14.2.1 产品 功能 架构 

教育 类 App 项 目 一 般 分 为 作品 、 课 程 、 答 疑 、 题 库 等 4 大 类 功能 架构 组 成 。 作 品 包括 给 
文字 类 、 音 视频 类 、 图 册 等 3 小 类 ， 这 是 展示 形式 的 教育 ， 让 用 户 能 欣赏 到 优秀 的 作品 ， 其 次 
是 课程 的 学 习 ， 现 在 比较 流行 的 课程 学 习 方式 多 样 化 ， 其 中 视频 直播 的 形式 较为 广泛 ， 然 后 再 
加 上 学 习 过 程 中 的 中 2 
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1 时 通信 、 游 戏 竞赛 等 模式 来 促进 用 户 与 老师 、 用 户 与 用 户 之 间 的 交流 ， 
次 就 是 答疑 解答 部 分 ， 这 部 分 体现 的 更 多 是 问卷 调查 、 人 工 咨询 、 智 能 客服 的 配合 等 ， 通 过 这 
户 的 困惑 ， 达 到 事半功倍 的 效果 ， 最 后 是 题库 部 分 ， 这 也 是 比较 重要 的 一 个 

已 


环节 ， 教 育 市 场 上 较 主 流 的 App 几乎 都 渗入 了 在 线 答题 、 答 案 分 析 和 考试 测评 等 功能 ， 这 样 
和 有 










































































































































































































































































户 不 但 能 随时 随地 的 评测 ， 还 能 看 到 每 个 题目 的 精心 讲解 与 分 析 ， 从 而 达到 良好 的 用 户 体 验 。 
产品 功能 架构 如 图 14-2 所 示 。 
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14.2.2 ”学习 计划 架构 
学 习 计划 功能 也 是 开发 教育 产品 
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个 优质 的 学 习 计 划 板 块 
也 是 提升 产品 档次 的 最 佳 方式 。 学 习 计划 模板 有 很 多 种 ， 下 面 就 针对 比较 常见 ， 也 是 比较 典型 
的 一 种 模板 来 阐述 : 该 模板 分 为 4 个 阶段 ， 分 别 为 机 构 培 训 的 选择 、 学 习 任 务 的 完成 、 题 库 的 
练习 复习 、 最 后 是 针对 以 上 的 学 习 做 一 个 最 终 的 评测 考试 。 学 习 计划 架构 如 图 14-3 所 示 。 









































不 可 或 缺 的 一 个 环节 ， 产 品 丰 
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图 14-3 


14.3 教育 App 中 高 频 使 用 的 API 
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被 高 频 使 用 的 模块 API 分 为 “界面 组 件 ” 功 能 扩展 ”和 “ 
别 表 示 App UI 层面 组 件 调用 、 功 能 层次 方面 的 实现 和 对 接 第 三 方 开放 的 服 
和 到 14-4 所 示 。 
教育 类 应 用 中 被 高 频 使 用 的 模块 API 
界面 日 历 前 切 板 搜索 框 。 ) ( ”聊天 杠 
组 件 “习题 选 择 器 (人 城市 列表 图 片 裁 轮 揪 图 
功能 (文件 阅读 语音 识别 音频 播放 跟 读 
扩展 二 维 码 文件 下 载 “)】 ( 。 视频 播放 录音 
开放 (交付 推送 客服 分 享 
服务 。( 文本 编辑 翻译 ”即时 通讯 “) (直播 
图 14-4 
14.3.1 UI 组 件 类 模块 
界面 组 件 类 模块 主要 是 为 了 实现 App 静态 界面 的 组 成 封装 而 成 的 ， 教 育 
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模块 的 使 用 主要 有 以 下 几 种 。 
e。 日 历 : APICloud 提供 样式 丰富 的 日 历 模 块 ， 支持 快 速 滑动 ， 并 且 可 以 显示 农历 、 市 假 
和 24 节气 的 日 历 ， 也 可 自 定义 日 历 的 样式 、 添 加 特殊 日 期 标注 、 切 换 月 份 、 设 置 指 
定 日 期 等 ， 还 能 实现 常用 的 日 期 选择 和 日 历 展示 功能 。 使 用 起 来 非常 简单 ， 就 像 使 
ListView 一 样 。 

。 剪 切 板 : APICloud 提供 剪 切 板 模块 ， 封 装 了 iOS 和 Android 平台 的 数据 复制 功能 ， 通 过 
该 功能 可 以 实现 对 文本 的 复制 粘贴 ， 教 育 类 App 会 经 常 使 用 该 功能 。 

。 搜索 框 : APICloud 提供 自 定义 搜索 框 模块 ， 本 模块 开发 者 可 自 定义 模板 的 样式 ， 还 司 
将 搜索 记录 归档 到 本 地 。 

。 聊天 框 : APICloud 提供 了 聊天 输入 框 模 块 ， 开 发 者 可 自 定义 该 输入 框 的 功能 。 通 过 
open 接口 可 在 当前 Window 底部 打 个 输入 框 ， 该 输入 框 的 生命 属于 当前 Window 
所 有 。 当 输入 框 获取 焦点 后 ， 会 自动 弹 动 到 软 键盘 之 上 。 

。 习题 选择 器 : APICloud 提供 了 多 款 选 择 器 模块 并 封装 了 一 个 支持 多 选 的 选择 器 ， 开 发 
者 可 自 定 义 该 选择 器 的 样式 及 其 数据 源 。 当 App 需要 为 用 户 同时 提供 多 种 可 选项 的 支 
持 时 可 以 选择 该 控件 来 快速 配置 使 用 以 节省 开发 时 间 。 

。 城市 列表 : APICloud 提供 了 城市 列表 模块 ， 可 以 方便 快捷 地 集成 到 项 。 它 文 持 输 
入 名 称 搜索 城市 ， 以 及 根据 索引 查找 城市 。 在 教育 类 应 使 用 频率 较 高 的 场景 一 般 
是 通过 指定 城市 名 称 然后 获取 到 该 城市 的 教育 相关 的 信息 。 

。 图 片 裁剪 : APICloud 提供 了 多 款 图 片 裁剪 模块 ， 通 过 拍照 或 者 从 相册 选取 图 片 之 后 ， 
调用 图 片 剪 切 的 方法 。 用 户 可 以 拖 动 、 缩 放 、 改 变 剪 切 框 大 小 ， 也 可 以 通过 剪 切 框 对 
到 片 进行 缩放 。 

。 轮 播 图 : APICloud 提供 了 轮 播 图 模块 ， 该 模块 提供 了 多 屏 异 显 文 持 ， 可 以 在 指定 的 屏 
幕 上 显示 HITML 和 轮 播 图 片 ， 支 持 运 行 时 调用 HTML 页 面 上 的 JavaScript 函数 、 动 态 
改变 显示 内 容 。 

14.3.2 功能 扩展 类 模块 
功能 扩展 类 模块 主要 是 为 了 实现 App 的 主体 业务 功能 封装 而 成 的 ， 教 育 类 项 目 功 能 扩展 模 
块 的 使 用 主要 有 以 下 几 种 。 

。 文件 阅读 : APICloud 提供 了 文件 阅读 模块 ， 该 模块 封装 阅读 文档 的 功能 ， 开 发 提 
传 进来 一 个 文档 即 可 读 出 文档 的 内 容 并 显示 出 来 。 此 模块 在 教育 类 应 使 用 频率 较 
高 的 场景 一 般 为 在 线 查 看 学 习 资料 等 信息 ， 这 很 大 程度 提高 了 用 户 的 使 用 体验 。 

。 语音 识别 : APICloud 封装 度 、 讯 飞 、 云 之 声 的 语音 识别 SDK。 语 音 识别 (Automatic 
Speech Recognition, ASR) 被 称 为 自动 语音 识别 ， 其 目标 是 将 人 话 的 词汇 内 容 
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转换 为 计算 机 可 读 的 输入 ， 例 如 我 们 朗读 英文 、 练 习 发 音 等 能 用 到 这 种 模块 。 
音频 播放 : APICloud 提供 了 音频 播放 模块 ， 支 持 对 本 地 、 网 络 音 频 资源 的 播放 。 当 播 
放 网 络 音频 时 模块 会 把 网 络 音频 资源 缓存 到 本 地 ， 并 将 缓存 到 本 地 的 音频 的 绝对 路 径 
返回 给 开发 者 。 
。 二 维 码 : APICloud 提供 二 维 码 扫描 模块 ， 开 发 者 可 通过 调整 接口 参数 将 扫描 结果 保存 到 
系统 相册 或 指定 位 置 .FNScanner 模 块 是 Scanner 模块 的 优化 版 ， 建 议 使 用 FNScanner 模 块 。 
。 文件 下 载 : APICloud 提供 文件 下 载 模块 ， 通 过 downloadManager 模块 能 够 管理 所 有 的 下 
载 进程 并 可 以 通过 界面 来 到 载 进 度 等 信息 ;同时 还 提供 压缩 包 解 压 、 快 速 查 载 
完成 的 文件 等 功能 。 
。 视频 播放 : APICloud 提供 视频 播放 模块 ， 该 模块 封装 了 视频 播放 功能 。 可 快 进 、 快 退 
设置 播放 位 置 等 操作 ， 亦 可 设置 屏幕 亮度 和 系统 声音 大 小 。 通 过 监听 接口 可 获取 模块 
上 各 种 手势 的 操作 事件 。 
。 跟 读 : APICloud 把 驰 声 的 API 封装 成 模块 ， 该 模块 有 对 文本 信息 进行 跟 读 来 判断 发 音 
正确 率 的 功能 。 
。 录音 : APICloud 提供 了 手机 录音 的 模块 ， 能 够 快速 地 为 开发 者 提供 一 个 完整 的 录音 功 
能 。 该 模块 提供 Android 和 iOS 版 本 ， 录 音 方式 及 录制 的 音频 格式 也 依赖 于 相应 系统 。 


14.3.3 开放 服务 类 模块 


放 服 务 类 模块 主要 为 了 集成 第 三 方 服务 功能 封装 而 成 的 ， 教 育 类 的 项 目 开放 服务 模块 的 
使 用 主要 有 以 下 几 种 。 















































































































































































































































































































































































































































































































































































































































































































































































































































































































































。 推送 : APICloud 提供 了 多 家 消息 推送 平台 ， 例 如 腾讯 信人 鱼 、 极 光 推 送 、 
模块 在 教育 类 应 用 中 使 用 频率 较 高 ， 比 如 提醒 用 户 上 课 、 视 频 和 音频 消息 更 新 或 者 丰 
人 上 传 了 作品 等 推送 信息 。 

。 支付 : APICloud 提供 了 丰富 的 支付 模块 ， 例 如 支付 宝 、 微 信 、 和 银联 等 ， 集 成 简单 、 方 

便 开发 者 使 用 。 在 教育 类 应 用 中 使 用 频率 较 高 的 场景 一 般 多 为 充值 购买 课程 教材 、 付 

费 下 载 等 功能 。 

。 客服 : APICloud 提供 了 丰富 的 客服 模块 ， 例 如 美 洽 、KF5、 网 易 七 鱼 等 。 客 服 模块 在 教 

要 类 应 用 中 使 用 频率 较 高 的 场景 多 为 在 App 端 与 平台 的 工作 人 员 在 第 一 时 间 取 得 联系 ， 

进行 在 线 咨询 等 。 

。 即时 通信 : APICloud 提供 了 很 多 即时 通信 模块 ， 例 如 环 信 、 融 云 等 。 即 时 通讯 模块 在 
教育 类 应 用 中 使 用 频率 较 高 的 场景 多 为 学 生 之 间 的 私 聊 、 课 堂 互动 等 。 

。 文本 编辑 : APICloud 提供 了 文本 编辑 模块 ， 特 别 是 富 文本 编辑 器 模块 。 用 原生 代码 实 
现 手 机 上 的 富 文本 编辑 器 ， 可 以 对 文字 进行 排版 布局 、 样 式 调整 。iOS 还 支持 插入 图 片 、 
超 链 接 的 功能 。 要 注意 Android 和 iOS 部 分 功能 存在 差异 。 同 时 iOS 只 支持 iPhone5 以 
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上 的 机 型 。 


e 分 享 : APICloud 提供 了 

和 mobShare 等 
e 直播 : APIClou 

能 ， 不 但 能 确 
。 翻译 : APICloud 直接 调 
欠 上 这 些 教育 类 应 用 最 核 
款 教育 类 应 用 只 需 


APICloud 




















x 





a 
FE 流 的 分 享 


封装 成 模块 。 


14.5 小 结 253 





台 的 分 享 模块 ， 诸 如 QQ、 微 信 、 新 浪 微 博 、Facebook 
被 我 们 
































和 的 模块 ， 该 模块 封装 





提供 了 


























省 

















直播 清晰 顺畅 ， 同 时 还 


































































































互动 聊天 等 功能 。 











音频 及 视频 拉 流 和 推 流 的 功 














道 翻译 的 API， 可 以 对 外 语 语种 进行 翻译 























心 的 功能 在 APICloud 平台 上 都 已 经 



































中 > 






































的 UI 勇 





要 按 需求 搭建 自己 应 


























可 ， 基 本 上 所 


























核心 的 功能 模块 APICloud 已 经 提供 了 。 
































可 并 实现 





有 现成 的 模块 了 ， 使 
己 的 业务 有 逻辑 即 


释义 等 。 












































14.4 如 何 使 用 APICloud 开发 一 球 教 育 App 








在 APICloud 平台 开发 教育 


















































App 的 步骤 如 
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可 供 参 考 ， 具 体 如 何 添加 详 






























































(1) 首先 在 APICloud 平台 创 双 详 见 本 书 1.2.2 小 节 。 
(2) 配 的 图 标 、 启 动 页 、 F 书 等 ; 详 见 本 书 1.2.5 小 节 ，7.4 节 。 
(3) 添加 需要 使 用 的 教育 相关 模块 ; 14.3 节 做 了 详细 的 描述 ， 
见 本 书 第 5 章 和 第 6 章 。 
(4) 具 中 调用 APICloud 模块 的 API 实现 功能 以 及 业务 逻辑 : 详 见 本 书 6.4 节 。 
(5) 具 中 提交 代码 到 APICloud 平台 : 详 见 本 书 1.2.3 小 节 。 
(6) 在 平台 编译 生成 Android 和 iOS 应 用 安装 包 : 详 见 本 书 第 7 章 。 
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在 APICloud 3 


小 结 
















































































要 App 





最 六 





首 使 用 的 功 





台 上 开发 一 款 教 育 类 App 还 是 非常 方便 的 ， 因 


























F 台 已 经 提供 了 





为 APICloud 了 


























多 使 用 APICloud 平台 








发 的 教 
























































平台 官网 一 案 候 


一 开发 案例 一 教育 
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Apbp 案例 可 以 访问 




















第 19 章 


如 何 快 速 开发 一 蒜 直 播 App 





主要 内 容 

本 章 介 绍 了 如 何 使 用 APICloud 来 创建 一 款 直播 类 App。 
学 习 目 标 

(1) 了 解 直播 类 App 的 功能 和 分 类 。 

(2) 了 解 直播 类 App 的 技术 架构 。 


(3) 了 解 在 直播 类 App 中 经 常 使 用 的 API。 
(4) 了 解 直播 类 App 的 开发 步骤 。 
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< 
15.1 直播 App 的 分 类 和 功能 
播 是 未 来 的 发 展 趋势 之 一 ， 这 种 不 亚 于 娱乐 圈 的 新 兴 平 台 必定 是 未 来 几 十 年 各 大 企业 
瞄准 的 香 佬 侍 ， 全民 播 、 做 直播 的 时 代 已 经 到 来 ， 移 动 化 直播 是 提高 用 户 量 和 增加 产品 知 
名 度 非常 重要 的 环节 。 并 且 便 携 这 

































































































































































































































































性 和 节省 直播 成 本 是 每 个 想 做 主播 的 用 户 最 先 考虑 的 事情 ， 这 
样 只 需要 一 个 手机 就 能 做 直播 的 时 代 已 经 到 来 ， 需 求 面 较 广 的 企业 会 选择 开发 一 款 直播 App 作 
为 与 时 俱 进 的 产品 来 提升 平台 用 户 量 。 














































































































































































































15.1.1 直播 App 的 分 类 
前 常见 的 直播 App 类 型 主要 包括 电台 直播 、 娱 乐 直播 、 教 育 直 播 、 社 区 直播 、 无 人 机 
播 、 行 车 记录 仪 直播 、 大 型 会 议 直 播 和 手机 秀 场 直播 等 8 大 类 型 。 








































































































































































































































































































。 电台 直播 : 嵌入 电视 台 信 号 来 进行 直播 ， 达 到 和 电视 机 频道 一 样 的 直播 效 
。 娱乐 直播 : 游戏 、 和 舞蹈、 唱歌 等 娱乐 性 的 直播 ， 类 似 于 全 民 TV、 斗 鱼 TV、YY 直播 等 。 
。 教育 直播 : 课堂 性 质 的 直播 ， 通 过 教学 白板 一 边 记 笔记 一 边 看 老师 视频 讲课 ， 达 到 渤 具 
其 境 的 教学 体验 。 
。 社区 直播 : 通过 视频 形式 来 展示 不 同 的 社区 文化 动态 。 

。 无 人 机 直播 : 通过 无 人 机 上 面 的 摄像 头 进行 直播 ， 一 般 高 空 作 业 、 全 景观 看 时 使 用 。 
。 行车 记录 仪 直播 : 这 是 汽车 上 比较 流行 的 直播 形式 ， 通 过 行车 记录 仪 的 摄像 头 来 进行 直播 。 



































































































































































































































































































































































































































































































































































































































。 大 型 会 议 直 播 : 通过 摄像 机 采 流 ， 然 后 推 流 到 手机 端 进行 直播 的 形式 。 
。 手机 秀 场 直 播 : 通过 手机 本 身 的 摄像 头 进行 采 流 ， 然 后 以 手机 拉 流 的 形式 直播 ， 比 如 花 
椒 直 播 、 映 客 直 播 等 。 


















































15.1.2 直播 App 的 主要 功能 


款 直 播 App 如 果 考 虑 要 长 期 运 能 成 功 承 
载 其 商业 模式 ， 从 总 体 功能 上 看 与 一 款 互 联网 App 实 
际 差别 不 大 ， 只 不 过 直播 App 的 核心 功能 是 设备 采 流 
和 视频 推演， 在 这 个 核心 功能 的 基础 上 再 扩展 其 他 功 
能 。 所 以 一 款 直 播 App 从 功能 规划 上 可 以 分 为 3 个 层 
级 : 核心 功能 、 扩 展 功 能 和 高 级 功能 ， 如 图 15-1 所 示 。 










































































































































































































































































个 直播 App 可 以 分 为 3 个 版 本 迭代 开发 ，1.0 版 
本 主要 实现 App 最 基本 的 在 线 直播 功能 ， 例 如 观看 站 
播 、 做 主播 、 支 付 打 赏 、 互 动 聊天 等 功能 ; 2.0 版 本 可 re, 
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256 ”第 15 章 如 何 快速 开发 一 款 直播 App 












































以 增加 短视 频 录 制 、 直 播 特效 等 功能 提升 用 户 体验 ， 还 可 以 添加 抽奖 活动 模块 来 提升 产品 的 娱 
乐 性 ; 3.0 版 本 增加 增强 用 户 黏 性 和 商业 模式 的 相关 功能 ， 如 娱乐 资讯 、 用 户 社 区 、 电 商 系统 等 。 
























































































































































资讯 可 以 圣 现 一 些 娱乐 资讯 、 媒 体 新 闻 、 杂 志 周 刊 类 的 内 容 来 增加 直播 的 广泛 性 ， 社 区 
以 参考 市 面 上 比较 大 的 直播 平台 ， 类 似 于 主播 发 帖 、 粉 丝 回复 交流 的 社区 等 ， 电 商 系统 平台 
以 推广 相应 的 的 产品 或 者 主播 可 以 在 自己 的 直播 间 开 设 商铺 等 。 




















































































































































































































15.2 直播 App 技术 染 构 
产品 技术 架构 


通过 集成 推 流 SDK 和 传输 协议 ， 例 如 比较 常用 的 RTMP、HLS、FLYV 等 协议 来 把 流 媒体 传 
输 到 第 三 方 的 直播 云 服务 器 ， 云 服务 器 经 过 存储 、 处 理 等 操作 输出 流 媒 体 ， 人 然后 通过 以 上 协议 
传输 到 播放 端 ， 通 过 播放 端 SDK 经 过 一 系列 的 流 媒 体 处 理 展 示 到 视频 播放 器 上 ， 从 而 达到 观看 
的 效果 。 产 品 技术 架构 如 图 15-2 所 示 。 
































































































































































































































视频 直播 产品 架构 图 


腾讯 去 阿里 云 





15.3 直播 App 中 高 频 使 用 的 API 


































































































































































































播 类 App 中 被 高 频 使 用 的 模块 API 分 为 “界面 组 件 ”功能 扩展 ” 和 “开放 服务 ” 等 3 大 类 ， 
分 别 表示 App UI 层面 组 件 的 调用 、 功 能 层次 方面 的 实现 和 对 接 第 三 方 开放 的 服务 等 内 容 ， 详 4 
分 类 如 和 4 15 一 3 所 示 。 
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视频 直播 类 应 用 中 被 高 频 使 用 的 模块 API 


界面 对 话 框 动画 ) ( 聊天 输入 框 礼物 特效 

组 件 城市 列表 美 颜 图 片 裁剪 轮 播 图 

功能 加 密 拍照 定位 录制 

扩展 摄像 身份 验证 录音 权限 管理 

开放 支付 推送 客服 分 享 

服务 积分 政策 版 本 管理 即时 通讯 直播 去 
图 15 一 3 


15.3.1 UI 组 件 类 模块 


界面 组 件 类 模块 主要 是 为 了 实现 App 静态 界面 的 组 成 封装 而 成 的 ， 直 播 类 项 目 界面 组 件 模 
块 的 使 用 主要 有 以 下 几 种 。 







































































































































































。 对 话 框 : APICloud 提供 样式 丰富 的 图 表 模 块 ， 封 装 了 11 种 款式 的 对 话 框 ， 每 一 种 款式 
都 提供 一 个 接口 来 调用 ， 开 发 者 可 按照 各 个 接口 的 样式 来 自 定 义 对 话 框 上 的 文字 、 图 
片 等 。 后 续 我 们 会 根据 开发 者 需求 继续 添加 若干 款式 的 对 话 框 接口 。 
。 动画 : APICloud 提供 样式 丰富 的 动画 模块 ， 随 着 用 户 对 App 使 用 体验 要 求 的 不 断 提升 ， 
传统 的 下 拉 刷 新 动画 模式 已 经 无 法 满足 用 户 挑 剔 的 视觉 体验 。 为 满足 广大 开发 者 对 下 
拉 刷 新 功能 的 需求 ， 我 们 推出 了 更 新 更 炫 的 下 拉 刷 新 模块 帮助 提升 体验 。 
。 聊天 输入 框 : APICloud 提供 聊天 输入 框 模块 ， 开 发 者 可 自 定义 该 输入 框 的 功能 。 通 过 
open 接口 可 在 当前 Window 底部 ] 个 输入 框 ， 该 输入 框 的 生命 属于 当前 Window 
所 有 。 当 输入 框 获取 焦点 后 ， 会 自动 弹 动 到 软 键盘 之 上 。 
。 礼物 特效 : APICloud 提供 点 赞 礼物 特效 ， 封 装 iOS 和 Android 鼓掌 动画 效果 ， 可 以 快速 
地 接 入 直播 鼓掌 动画 效果 。 
。 城市 列表 : APICloud 提供 了 城市 列表 模块 ， 可 方便 快捷 地 集成 到 项 ， 支 持 输 入 名 
称 搜索 城市 ， 以 及 根据 索引 查找 城市 等 功能 。 在 视频 直播 类 App 中 使 用 频率 较 高 的 场 
景 一 般 是 通过 指定 城市 名 称 然后 获取 该 城市 的 直播 信息 。 










































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































。 美 颜 : APICloud 提供 了 视频 美 颜 模块 ， 为 广大 移动 应 用 开发 者 提供 免费 、 简 单 、 快 捷 、 
稳定 的 接口 ， 帮 助 开 发 者 快速 实现 自 有 App 上 的 短视 频 应 用 开发 。 其 中 包含 短视 频 拍 
摄 、 水 印 、 拍 摄 码 率 等 的 自 定义 设置 ， 并 自 带 美 颜 功能 。 

。 图 片 裁剪 : APICloud 提供 了 多 款 图 片 裁剪 模 块 ， 在 拍照 或 者 从 相册 选取 图 片 之 后 ， 可 
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锥 调用 图 片 剪 
到 片 进行 缩放 
。 轮 播 图 : APIC 


















































切 方法 。 


o 


了 
| 














欠 拖 动 、 缩 放 、 改 变 剪 切 框 大 小 ， 也 可 以 通过 剪 切 框 对 

































































loud 提供 了 轮 播 图 模块 ， 模 块 提供 了 多 屏 异 显 支 持 ， 














上 显示 HTML 和 轮 播 图 片 ， 


改变 显示 内 容 
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15.3.2 功能 扩展 类 模块 














功能 扩展 类 模块 主要 是 为 了 实现 App 的 主体 业务 功能 封装 而 成 的 ， 




















块 的 使 用 主要 有 以 下 几 种 。 




















。 加 密 : APICloud 提供 了 加 蜜 模块 ， 以 signature 模块 为 例 ， 可 以 
AES、BASE64、shal 方式 加 密 ， 本 模块 的 每 个 接口 都 实现 了 同步 和 异步 两 套 方法 。 



































过 持 运 行 时 调用 HTML 页 再 


























可 以 在 指定 的 屏幕 








上 的 JavaScript 函数 ， 动 态 





















































播 类 项 目 功能 扩展 模 





巴 指定 字符 捉 按 照 MD5、 



























































发 者 可 按 需 求 自行 选择 接口 调用 。 
。 拍照 : APICloud 提供 拍照 功能 模块 ， 使 用 本 模块 可 实现 对 图 片 的 特 
旋转 、 光 影 、 边 框 等 处 理 。 


。 定位 : APICloud 封装 了 百度 、 
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效 、 虚 化 、 裁 筋 、 






























































高 德 地 图 SDK， 可 以 通过 定位 模 : 














块 获取 当前 经 纬度 ， 

































































通过 经 纬度 获 


























取 到 当前 位 


























置 及 周边 信息 ， 也 可 以 通过 该 模块 进行 导航 路 线 规划 。 在 视频 
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播 类 App 











。 录制 : APICloud 提供 录制 功 
。 身份 验证 : APICloud 封装 了 身份 验证 模块 ， 可 快速 实现 
加 有 效 地 提高 识别 的 安全 性 和 真实 性 ， 


识别 或 人 脸 识 























位 模块 使 用 频率 较 高 ， 通 常 是 结合 城市 列表 模块 自动 获取 当前 城市 名 称 。 


















































能 ， 实 现 了 短视 频 录 制 功 能 ， 还 可 以 设 

















滤 镜 和 背景 音乐 。 









































维 码 登台 





















































别 等 功能 ， 























RR 、 指纹 识别 、 声 纹 


















































络 等 信息 作为 





安全 识别 的 重 











。 权限 管理 : APICloud 提供 了 权限 管理 模块 ， 可 V) 





要 依据 。 


还 能 利用 位 置 和 网 





















































过 该 模块 选择 














通 指定 的 权限 ， 例 























如 定位 、 蓝 牙 

















访问 、 日 历 、 










































































App 端 需 要 

















手机 定位 权限 


e 摄像 : APICloud 提 任 
App 视频 录制 相关 功能 。 
。 录音 : APICloud 提供 录音 功能 ， 通 过 封装 系统 的 录音 接 





等 。 


播 ， 此 时 就 需 3 





麦克 风 等 。 权 限 管理 在 视频 类 App 中 使 用 频率 较 高 ， 比 如 






































启 手 机 端的 摄像 头 ; App 端 要 获取 定位 ， 此 时 需要 开启 


















































一 个 完整 的 录音 功能 。 该 模块 提供 Android 和 iOS 版 本 ，5 
依赖 于 相应 系统 。Android 系统 支持 的 录 旬 











摄像 功能 ， 可 以 设置 录制 时 长 、 视 努 





























mT 


























人 码 率 、 美 颜 参 数 等 ， 
































， 能 够 








速 地 为 开发 者 提供 












































的 录制 音频 格式 为 : aac、caf。 


15.3.3 开放 服务 类 模块 








出 音频 格式 为 : amr、aac、 


民 音 方式 及 录制 的 音频 格式 也 





3gp ; iOS 系统 支持 





























放 服 务 类 模块 3 





要 为 了 集成 




















和 三方 服 务 功能 封装 而 成 的 ， 








播 类 项 








放 服 务 模块 的 使 
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主要 有 以 下 几 种 。 





















































。 推送 : APICloud 提供 了 多 家 消息 推送 平台 ， 例 如 腾讯 信鸽 、 极 光 推 送 、 个 推 等 。 推 
模块 在 视频 直播 类 应 用 中 使 用 频率 较 高 ， 当 用 户 关注 的 主播 开始 直播 时 会 发 送 开播 消 
息 到 客户 端 ， 以 便 及 时 接收 到 开播 信号 ， 不 错过 任何 一 场 精彩 的 直播 。 
。 支付 : APICloud 提供 了 丰富 的 支付 模块 ， 例 如 支付 宝 、 微 信 、 银 联 等 ， 集 成 简单 ， 方 
蝎 开 发 者 使 用 。 在 视频 直播 类 App 中 使 用 频率 较 高 的 场景 一 般 多 为 充值 送礼 ， 可 以 在 
播 间 购买 礼物 送 给 喜欢 的 主播 。 
。 客服 : APICloud 提供 了 丰富 的 客服 模块 ， 例 如 美 洽 、KF5、 网 易 七 鱼 等 。 能 快速 集成 在 
视频 直播 类 App 中 ， 客 服 模块 在 视频 App 中 使 用 频率 较 高 的 应 用 场景 是 在 App 端 和 
播 平台 的 工作 人 员 在 第 一 时 间 取 得 联系 等 。 
。 即时 通信 : APICloud 提供 了 很 多 即时 通信 模块 ， 例 如 环 信 、 融 云 等 。 能 快速 集成 在 视 
频 直 播 类 App 中 ， 即 时 通信 模块 在 视频 模块 中 使 用 频率 较 高 的 应 用 场景 是 私密 群 组 、 
互动 聊天 室 等 。 
。 积分 政策 : APICloud 提供 了 很 多 积分 兑换 模块 ， 可 用 于 实现 积分 商城 页 面 ， 轻 松 、 高 
效 集成 积分 商城 功能 到 自己 的 App 内 。 使 自己 的 App 和 积分 商城 实现 无 颖 链接 。 
。 版 本 管理 : APICloud 提供 了 版 本 管理 模块 ， 管 理 App 的 版 本 管理 、 云 修复 、 更 新 鲜 
功能 。 
。 直播 云 : APICloud 提供 了 很 多 视频 直播 模块 ， 例 如 七 牛 直播 模块 ， 封 装 了 七 牛 直播 
服务 平台 的 移动 端 开放 SDK， 集 成 到 手机 中 即 可 实现 视频 直播 的 播放 等 功能 。 
。 分 享 : APICloud 提供 了 很 多 功能 分 享 的 模块 ， 使 用 此 模块 可 实现 分 享 文字 、 图 片 、 
乐 、 视 频 、 链 接 到 QQ、 微 信 、 微 博 、Facebook、Twitter 等 多 个 平台 。 












































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































Nl 





































































































































































































以 上 这 些 直播 类 App 最 核心 的 功能 在 APICloud 平台 上 都 已 经 有 现成 的 模块 了 ， 使 
APICloud 开发 一 款 直 播 类 App 只 需要 按 需求 搭建 UI 界面 并 实现 自己 的 业务 逻辑 即 可 ， 基 本 上 
所 有 核心 的 功能 模块 在 APICloud 上 已 经 提供 好 了 。 







































































































































































15.4 如 何 使 用 APICloud 开发 一 球 直 播 App 


在 APICloud 平台 开发 直播 App 的 步骤 如 下 。 



























































(1) 首先 在 APICloud 平台 创建 应 用 : 详 见 本 书 1.2.2 小 节 。 
















































































(2) 配置 应 用 的 图 标 、 启 动 页 、 编 译 证 书 等 : 详 见 本 书 1.2.5 小 节 ，7.4 节 。 




























































































(3) 添加 需要 使 用 的 直播 相关 模块 : 15.3 节 做 了 详细 的 描述 ， 可 供 参 考 ， 具 体 如 何 添加 详 















































0000000000000 https//yabook.org 

















260 第 15 章 如 何 快速 开发 一 款 直播 App 





























见 本 书 第 5 章 和 第 6 章 。 



































(4) 在 开发 工具 中 调用 APICloud 模块 的 API 实现 功能 以 及 业务 逻辑 : 详 见 本 书 6.4 节 。 






























































(5) 在 开发 工具 中 提交 代码 到 APICloud 平台 : 详 见 本 书 1.2.3 小 节 。 

































































(6) 在 平台 编译 生成 Android 和 iOS 应 用 安装 包 : 详 见 本 书 第 7 章 。 











15.5 小 结 


在 APICloud 平台 上 开发 一 款 直播 类 App 还 是 非常 方便 的 ， 因 为 APICloud 平台 上 已 经 提供 
了 直播 App 中 最 常 使 用 的 功能 模块 和 API。 更 多 使 用 APICloud 平台 开发 的 直播 App 案例 可 以 访 
问 平台 官网 一 案例 一 开发 案例 一 直播 模块 查看 。 在 GitHub 上 也 可 以 查看 APICloud 平台 开发 的 
播 相关 代码 以 及 相关 注释 信息 。 






























































































































































































































































































































































第 16 章 


如 何 快 速 开发 一 蒜 电 商 App 











主要 内 容 

本 章 介 绍 了 如 何 使 用 APICloud 来 创建 一 款 电 商 类 App。 
学 习 目 标 

(1) 了 解 电 商 类 App 的 分 类 和 功能 

(2) 了 解 电 商 类 App 的 技术 架构 。 

(3) 了 解 在 电 商 类 App 中 经 常 使 用 的 API。 

(4) 了 解 电 商 类 App 的 开发 步 又。 
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16.1 电 商 App 的 分 类 和 功能 


甩 商 已 涉及 互联 网 的 各 个 行业 ， 其 最 大 的 特点 就 是 便利 性 ， 为 人 们 解决 衣食 住 行 等 问题 。 
大 多 企业 将 线 下 业务 迁移 到 线 上 进行 交易 ， 包 括 在 线 购物 、 外 卖 服务 、 房 屋 买 卖 、 交 通 出 行 等 
各 个 方面 。 只 要 你 善于 发 现 ， 生 活 中 总 会 有 一 个 电 商 App 的 需求 。 





























































































































































































































16.1.1 电 商 App 的 分 类 


常见 的 电 商 App 类 型 主要 包括 B2B、B2C、C2B、C2C 和 B2B2C 等 5 大 类 
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目 






































。 B2B(Business to Business) : 是 指 商 家 与 商家 建立 的 商业 关系 。 例 如 我 们 在 麦当劳 
只 能 买 到 可 口 可 乐 是 因为 麦当劳 与 可 口 可 乐 是 商业 伙伴 的 关系 。 商 家 们 建立 商业 伙 自 
的 关系 是 希望 通过 大 家 所 提供 的 东西 来 形成 一 个 互补 的 发 展 机 会 ， 大 家 的 生意 都 可 以 
利润 。 例 如 阿里 巴巴 和 茵 脱 。 
。 B2C(Business to Consumer) : 就 是 我 们 经 常 看 到 的 供应 商 直 接 把 商品 卖 给 用 户 ， 即 
“ 商 对 客 ” 模 式 ， 也 就 是 通常 说 的 商业 零售 ， 直 接 面向 消费 者 销售 产品 和 服务 。 例 
当 劳 吃 东 西 就 是 B2C， 因 为 你 只 是 一 个 客户 。 例 如 当当 、 亚 马 逊 、 京 东 等 。 
。 C2B(Customer to Business) : 比较 本 土 的 说 法 是 要 约 ， 由 客户 发 布 自己 要 些 什么 东西 ， 
要 求 的 价格 是 什么 ， 然 后 由 商家 来 决定 是 否 接受 客户 的 要 约 。 假 如 商家 接受 客户 的 要 
约 ， 那 么 交易 成 功 ; 假如 商家 不 接受 客户 的 要 约 ， 那 么 就 是 交易 失败 。C2B 模式 的 核 
过 聚合 分 散 分 布 但 数量 庞大 的 用 户 形成 一 个 强大 的 采购 集团 ， 以 此 来 改变 B2C 
模式 户 一 对 一 出 价 的 弱势 地 位 ， 使 之 享受 到 以 大 批发 商 的 价格 买单 件 商 品 的 利益 。 
例如 U-deals、 当 家 物业 联盟 。C2B 模式 的 一 般 运 行 机 制 是 需求 动议 的 发 起 、 消 费 者 群 
体 自觉 聚集 、 消 费 者 群体 内 部 审议 、 制 定 出 明确 的 需求 计划 、 选 择 合适 的 核心 商家 或 
企业 群体 、 展 开 和 集体 议价 谈判 、 进 行 联合 购买 、 消 费 者 群体 对 结果 进行 分 配 、 消 费 
群体 对 于 本 次 交易 结果 的 评价 、 消 费 群体 解散 或 对 抗 。 
。 C2C(Customer to Customer) : 客户 个 人 把 东西 放 到 网 上 去 卖 ,是 个 人 与 个 人 之 间 的 电 
子 商务 。 例 如 淘宝 、 拍 拍 、 易 趣 等 。C2C 的 主要 盈利 模式 是 会 员 费 、 交 易 提 成 费 、 厂 
告 费用 、 排 名 竞价 费用 、 支 付 环节 费用 等 。C2C 的 一 般 运作 流程 是 卖方 将 欲 卖 的 货品 
登记 在 社 群 服务 器 上 、 买 方 透 过 入 口 网 页 服务 器 得 到 资料 、 买 方 透 过 检查 卖方 的 信 
度 后 选择 和 欲 购买 的 货品 、 透 过 管理 交易 的 平台 分 别 完 成 资料 记录 、 买 方 与 卖方 进行 收 
付款 交易 、 透 过 网 站 的 物流 运送 机 制 将 货品 送 到 买方 。 
。 B2B2C(Business to Business to Customer): 第 一 个 B 指 广义 的 卖方 ( 即 成 品 、 半 成 品 、 
材料 提供 商 等 ) ， 第 二 个 B 指 交易 平台 ， 方 的 联系 平台 ， 同 时 提供 优质 
的 附加 服务 ，C 指 买方 。 卖 方 不 仅仅 是 公 也 可 以 包括 个 人 ， 是 一 种 逻辑 上 买卖 关系 
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心 是 通 
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to:2 
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的 卖方 。 平 台 绝 非 简单 的 中 介 ， 而 是 提供 高 附加 值 服务 的 渠道 
























































几 构 ， 拥 有 客户 管理 、 
















































































言 息 反 馈 、 数 据 库 管理 、 决 策 支 持 等 功能 。 买 方 同样 是 逻辑 上 的 关系 ， 可 以 是 内 部 也 




















可 以 是 外 部 的 。B2B2C 定义 包括 了 现存 的 B2C 和 C2C 平台 的 商 计 
可 以 提供 更 优质 的 服务 。 阿 里 巴巴 加 淘宝 就 是 典型 的 B2B2C。 

























































































16.1.2 电 商 App 的 主要 功能 


款 电 商 App 如 果 考 虑 要 长 期 运营 并 且 能 成 功 承载 其 商业 模式 ， 从 总 







































































上 模式， 更 加 综合 化 ， 


体 功能 上 看 与 一 款 互 















































联网 App 实际 差别 不 大 ， 只 不 过 电 商 App 的 核心 功能 是 网 上 支付 和 订单 处 理 
























































， 在 这 个 核心 功能 











的 基础 上 再 扩展 其 他 功能 。 所 以 一 款 电 商 App 从 功能 规划 上 可 以 分 为 3 个 层级 一 一 核心 功能 、 


























扩展 功能 和 高 级 功能 ， 如 图 16-1 所 示 。 



































个 电 商 App 可 以 分 为 3 个 版 本 迭代 开发 ，1.0 版 
本 主要 实现 App 的 产品 展示 、 网 上 订购 、 支 付 等 基本 功 
能 ; 2.0 版 本 可 以 增加 团购 模式 、 数 据 统 计 展 示 等 功能 
来 提升 用 户 体 验 ， 还 可 以 添加 积分 商城 等 比较 常用 的 功 
能 ; 3.0 版 本 增加 增强 用 户 黏 性 和 商业 模式 的 相关 功能 ， 
如 多 端 应 用 、 用 户 社区 、 电 商 系统 等 。 














































































































































































































多 端 应 用 呈现 的 形式 如 商家 入 驻 、 买 家 购买 等 来 实 
现 产品 的 多 样 性 ， 提 升 用 户 体验 。 社 区 可 以 让 周边 商品 
或 户 收藏 的 产品 以 买 家 秀 的 形式 展现 出 来 ,“ 电 商 
+ 直播 ”这 一 趋势 也 是 现在 的 发 展 方向 ， 会 让 用 户 更 加 图 
近 距 离 的 体验 商品 之 来 的 实用 性 。 




























































































































































































16.2 电 商 App 的 产品 结构 


16.2.1 前 端 产品 结构 























16—1 









































对 于 一 个 完整 的 电 商 类 App， 移 动 支付 是 必 不 可 少 的 。 用 户 从 注册 登 





录 到 商品 的 检索 直至 















































产生 购买 行为 形成 一 个 闭环 。 举 个 例子 ， 比 如 用 户 需要 购买 一 款 智能 音箱 ， 























他 可 以 通过 关键 字 、 



































价格 筛选 、 品 牌 筛选 等 条 件 来 检索 出 一 款 适 合 自己 的 智能 音箱 ， 并 通过 移动 支付 完成 商品 的 结 
算 ， 最 终生 成 订单 ;用户 赁 借 订 单 还 可 以 进行 物流 查询 、 售 后 服务 、 退 换 货 等 相关 操作 。 电 商 











































































































类 App 通 












































则 | 
常会 采用 积分 制 来 提高 用 户 条 性 ， 积 分 的 来 源 也 是 多 种 多 样 的 ， 比 如 邀请 好 友 、 签 到 、 
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做 任务 、 结 算 订单 等 。 积 分 的 核 销 大 致 分 为 两 种 ， ! 是 按 规定 比例 在 支付 时 抵 现 ， 男 外 一 
就 是 可 以 通过 积分 在 积分 商城 进行 礼品 的 兑换 。 前 端 产品 结构 如 图 16-2 所 示 。 
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电 商 App 











图 16 一 2 


16.2.2 ”后台 产品 结构 


电 商 的 后 台 管 理 主 要 是 为 商家 提供 可 视 化 的 数据 操作 平台 ， 一 般 分 为 5 大 类 : 
理 、 积 分 管理 、 财 务 管理 和 订单 管理 。 用 户 管理 包括 用 户 角 色 管 理 、 ' 增 删改 查 等 ， 
理 包括 商品 分 类 、 we 架 /下 架 、 商 品 增删 改 查 等 ; 积分 管理 包括 积分 规则 、 


置 等 ， 财 务 管理 包括 提现 管理 、 结 算 管 理 、 扣 费 管理 等 ， 订 单 管理 包括 订单 状态 操作 等 。 后 
产品 结构 如 图 16-3 所 示 。 
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图 16-3 
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16.3 电 商 App 中 高 频 使 用 的 API 


电 商 类 App 中 被 高 频 使 用 的 模块 API 分 为 “界面 组 件 ” 功 能 扩展 ”和 “开放 服务 ”等 3 大 类 ， 
分 别 表示 App UI 层面 组 件 调用 、 功 能 层次 方面 的 实现 和 对 4 服务 等 内 容 ， 详 细 分 
类 如 图 16-4 所 示 。 
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城市 列表 图 片 裁 间 对 话 杠 


Wowoyoeeoseorooroewoeoeorsoroooesoooreoooyoyroroyesooosyyoyoysyyorooyeoyoooosyewoyyoyooosoooosoooosyoyyoosyeyesyyyosywoyeyyoooeogeogeoseeey 











16.3.1 UI 组 件 类 模块 
界面 组 件 类 模块 主要 是 为 了 实现 App 静态 界面 的 组 成 封装 而 成 的 ， 电 商 类 项 目 界面 组 件 模 
块 的 使 用 主要 有 以 下 几 种 。 
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。 城市 列表 : APICloud 提供 了 城市 列表 模块 ， 可 方便 快捷 地 集成 到 项 ， 支 持 输 入 名 
称 搜索 城市 ， 以 及 根据 索引 查找 城市 。 在 电 商 类 App 中 使 用 频率 较 高 
过 指定 城市 名 称 然 后 获取 到 该 城市 周边 信息 或 者 天 气 的 一 些 信息 。 

。 图 片 裁剪 : APICloud 提供 了 多 款 图 片 裁剪 模块 ， 通 过 拍照 或 者 从 相册 选取 图 片 之 后 ， 
可 以 调用 图 片 剪 切 方法 。 用 户 可 以 拖 动 、 缩 放 、 改 变 剪 切 框 大 小 ， 也 可 以 通过 剪 切 杠 
对 图 片 进行 缩放 。 

。 对 话 框 : APICloud 提供 样式 丰富 的 图 表 模 块 ， 封 装 了 11 种 款式 的 对 话 框 ， 每 一 种 款式 
都 提供 一 个 接口 来 调用 ， 开 发 者 可 按照 各 个 接口 的 样式 来 自 定义 对 话 框 上 的 文字 、 图 

片 等 。 后 续 我 们 会 根据 开发 者 需求 继续 添加 若干 款式 的 对 话 框 接口 。 

。 搜索 框 : APICloud 提供 的 搜索 框 模块 ， 在 电 商 类 App 中 搜索 框 的 使 用 频率 
是 比较 高 的 ， 多 为 搜索 商品 、 商 品类 别 或 者 店铺 等 。 
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。 列表 视图 : APICloud 提供 了 样式 丰富 的 列表 模块 ， 在 电 商 项 目 中 使 用 频率 较 高 的 场景 
多 为 展示 商品 的 列表 、 购 物 车 列表 、 订 单列 表 等 。 

。 轮 播 : APICloud 提供 了 轮 播 图 模块 ， 模 块 提供 了 多 屏 异 显 支持 ， 可 以 在 指定 的 屏幕 上 
显示 HTML 和 轮 播 图 片 ， 并 支持 运行 时 调用 HTML 页 面 上 的 JavaScript 函数 ， 动 态 改 
变 显 示 内 容 。 

。 选择 器 : APICloud 提供 了 样式 丰富 的 选择 器 模块 ， 例 如 双 滑 块 的 选择 器 ， 可 以 在 筛选 
商品 的 时 候 作为 筛选 条 件 来 选择 一 个 价格 区 间 。 

。 动画 效果 : APICloud 提供 了 丰富 的 动画 效果 模块 ， 在 电 商 类 App 中 使 用 动画 效果 可 提 
升 App 端的 用 户 体验 。 























































































































































































































































































































16.3.2 功能 扩展 类 模块 
功能 扩展 类 模块 主要 是 为 了 实现 App 的 主体 业务 功能 封装 而 成 的 ， 电 商 类 项 目 功能 扩展 模 
块 的 使 用 主要 有 以 下 几 种 。 

















































































































。 二 维 码 扫描 : APICloud 提供 了 二 维 码 扫描 模块 ， 以 FNScanner 为 例 ， 该 模块 可 以 解析 二 

维 码 和 条 形 码 ， 在 电 商 类 App 中 使 用 频率 较 高 的 场景 一 般 是 通过 手机 App 的 维 码 

扫描 功能 来 扫描 商品 或 者 药品 信息 ， 以 及 扫描 查看 快递 单 信息 等 。 

。 定位 : APICloud 封装 了 百度 、 高 德 地 图 SDK， 可 以 通过 定位 模块 获取 当前 经 纬度 ， 通 

过 经 纬度 获取 到 当前 位 置 以 及 周边 信息 ， 也 可 以 通过 该 模块 进行 导航 路 线 规划 。 该 模 

块 在 电 商 类 App 中 使 用 频率 较 高 ， 比 如 可 以 在 电 商 App 中 通过 定位 查看 物流 信息 ， 通 

过 定位 查找 附近 的 商家 商品 等 。 

。 权限 管理 : APICloud 提供 了 权限 管理 模块 ， 可 以 通过 该 模块 选择 并 开通 指定 的 权限 ， 

例如 定位 、 j 、 麦 克 风 等 。 权 限 管理 商 类 应 使 用 频率 较 高 ， 比 如 获取 当 六 
位 置 、 访 问 通讯 录 、 消 息 通知 等 。 

。 语音 识别 : APICloud 提供 了 语音 识别 模块 ， 以 speechRecognizer 模块 为 例 ， 该 模块 封装 
了 科大 讯 飞 语音 识别 的 SDK。 开 发 者 只 需 调用 此 模块 即 可 实现 语音 识别 、 语 音 朗读 等 
功能 。 省 去 了 开发 者 去 科大 讯 飞 官网 注册 创建 App 的 复杂 流程 。 

。 浏览 器 : APICloud 提供 了 多 种 Web 浏览 器 模块 。 以 webBrowser 为 例 ， 该 模块 提供 App 
内 置 Web 浏览 器 功能 ，Android 使 用 腾讯 X5 引擎 提供 服务 ，iOS 使 用 WKWebView 
(iOS8.0 以 下 系统 仍 使 用 UIWebView) 提供 服务 。 

。 身份 认证 : APICloud 封装 了 身份 认证 模块 ， 可 以 实现 二 维 码 登录 、 指 纹 识 别 、 声 纹 识 
别 或 人 脸 识别 功能 ， 更 加 有 效 地 提高 识别 的 安全 性 和 真实 性 ， 还 能 利用 位 置 和 网 络 等 
信息 作为 安全 识别 的 重要 依据 。 

。 摇 一 摇 : APICloud 提供 了 摇 一 摇 模 块 ， 该 模块 在 电 商 类 App 中 比较 常见 ， 可 以 通过 摇 
一 摇 获 取 优 惠 券 等 。 
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e。 加 密 : APICloud 提供 了 加 密 模块 ， 以 signature 模块 为 例 ， 可 以 把 指定 字符 串 按 照 MD5、 
AES、BASE64、shal 等 方式 加 密 ， 本 模块 的 每 个 接口 都 实现 了 同步 和 异步 两 套 方法 。 
































16.3.3 开放 服务 类 模块 


放 服 务 类 模块 主要 为 了 集成 第 三 方 服 务 功能 封装 而 成 的 ， 电 商 类 项 放 服 务 模块 的 使 
主要 有 以 下 几 种 。 



























































































































































。 支付 : APICloud 提供 了 丰富 的 支付 模块 ， 例 如 支付 宝 、 微 信 、 银 联 等 ， 集 成 简单 、 方 
便 开发 者 使 用 。 支 付 模块 在 电 商 类 App 中 是 使 用 最 为 频繁 的 ， 开 发 者 可 以 选择 一 个 或 
多 个 支付 模块 集成 到 项 目 当 中 。 
。 推送 : APICloud 提供 了 多 家 消息 推送 平台 ， 例 如 腾讯 信鸽 、 极 光 推 送 、 个 推 等 ， 推 送 
模块 在 电 商 类 App 中 使 用 频率 较 高 ， 比 如 将 新 款 商 品 上 线 信息 推送 给 用 户 。 
。 客服 : APICloud 提供 了 丰富 的 客服 模块 ， 例 如 美 洽 、KF5、 网 易 七 鱼 等 。 能 快速 
电 商 类 App 中 ， 客 服 模块 的 使 用 频率 较 高 ， 用 于 帮 户 做 售 前 支持 、 退 换 货 交 流 等 。 
。 分 享 : APICloud 提供 了 丰富 的 分 享 模块 ， 分 享 功 能 在 电 商 类 项 目 中 使 用 频率 较 高 ， 
于 分 享 优质 的 商品 到 朋友 圈 、 微 信和 好 友 、 微 博 等 。 
。 统计 分 析 : APICloud 提供 了 丰富 的 统计 分 析 模 块 ， 该 模块 在 电 商 应 使 用 频率 较 
高 。 以 TalkingData 为 例 ， 基 于 App 数据 透析 运营 指标 ， 以 便 掌握 用 户 行为 。 除 此 之 外 ， 
APICloud 支持 友 盟 统计 、 诸 万 统计 、 腾 讯 云 分 析 等 国内 知名 数据 分 析 平 台 。 
。 竞 吧 : APICloud 提供 了 兑 吧 积 分 商城 模块 ， 可 以 为 电 商 类 App 轻松 添加 积分 兑换 功能 。 
。 即时 通信 : APICloud 提供 了 很 多 即时 通信 模块 ， 例 如 环 信 、 融 云 等 。 它 们 能 快速 集成 
在 电 商 类 App 中 ， 即 时 通信 模块 在 电 商 App 中 使 用 频率 较 高 的 应 用 场景 为 用 户 间 、 
户 与 商家 之 间 的 交流 等 。 
。 短信 和 验证: APICloud 提供 了 很 多 短信 验证 模块 ， 例 如 云 之 讯 、Mob 短信 验证 等 。 短 
验证 模块 在 电 商 类 App 中 使 用 频率 较 高 的 场景 为 注册 应 用 、 找 回 密码 等 。 
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以 上 这 些 电 商 类 App 最 核心 的 功能 在 APICloud 平台 上 都 已 经 有 现成 的 模块 了 ， 使 
APICloud 开发 一 款 电 商 类 App 只 需要 按 需 求 搭建 自身 UI 界面 并 实现 自己 的 业务 逻辑 即 可 。 


















































































































































16.4 如 何 使 用 APICloud 开发 一 款 电 商 App 


在 APICloud 平台 开发 电 商 App 的 步骤 如 下 。 


































































































(1) 首先 在 APICloud 平台 创建 应 用 : 详 见 本 书 1.2.2 小 节 。 
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(2) 配置 应 用 的 图 标 、 启 动 页 、 编 译 证 书 等 ; 详 见 本 书 1.2.5 小 节 ，7.4 节 。 











































































































(3) 添加 需要 使 用 的 电 商 相关 模块 : 13.3 节 做 了 详细 的 描述 ， 可 供 参 考 ， 具 体 如 何 添加 ， 



















































































(4) 在 开发 调用 APICloud 模块 的 API 实现 功能 以 及 业务 逻辑 : 详 见 本 书 6.4 市 。 
























































(5) 在 开发 工具 中 提交 代码 到 APICloud 平台 : 详 见 本 书 1.2.3 小 节 。 
























































(6) 在 平台 编译 生成 Android 和 iOS 应 用 安装 包 : 详 见 本 书 第 7 章 。 














16.5 ”小结 


在 APICloud 平台 上 开发 一 款 电 商 类 App 还 是 非常 方便 的 ， 因 为 APICloud 平台 上 已 经 提供 
了 电 商 App 中 最 常 使 用 功能 的 模块 和 API。 更 多 使 用 APICloud 平台 开发 的 电 商 App 案例 可 以 访 
问 平台 官网 一 案例 一 开发 案例 一 电 商 模块 查看 。 






































































































































































































































附录 A 


APICloud App 客户 端 开 发 规范 (Version 1.0) 


A.1 概述 

















为 了 提升 APICloud App 的 程序 质量 、 性 能 及 用 户 体 验 ， 同 时 也 为 了 统一 团队 代码 风格 ， 优 





Cs 
可 

















队 协 作 效率 ， 特 制定 及 推出 本 规范 。 






























































本 规范 基于 APICloud 项 




















APICloud 项 目 编 码 规范 的 升级 版 本 。 本 规范 适 


























0 
可 








编码 规范 编制 ， 


















































于 通过 APICloud 平台 开发 App 项 目的 开发 实施 





















































En 开 





队 ， 作 用 于 软件 项 阶段 和 后 期 维护 阶段 。 



























































A.2 APICloud 编码 原则 


A.2.1 项 目 架 构 
1. 基本 原则 








本 


i 














的 widget 包 结 构 应 




















遵循 APICloud 官方 模板 提供 的 结构 体系 ， 即 初始 项 目 应 包含 有 css、 










































































html、script、image、res 等 文件 夹 ， 























应 用 文件 应 严格 按照 文件 属性 归档 到 对 应 的 文件 夹 内 。 具 体 如 下 : 


















































。 css 目录 下 放 外 部 样式 文件 ，“.css” 文 件 应 全 部 放置 于 css 文件 夹 内 ， 





























。 html 目录 下 放 页 面 代码 ,“.html” 文 件 应 放置 于 html 文件 夹 内 ; 




























































































e。 script 目录 下 放 外 部 脚本 文件 ,“j” 文 件 应 放置 于 script 文件 夹 内 ; 


























e image 目录 下 放 组 成 UI 的 图 标 、 背 景 图 等 ; 























































































































e res 目录 下 放 其 他 



































到 的 资源 ， 项 目 内 正式 使 用 的 资源 类 文件 ， 如 音频 、 视 频 及 其 他 格 



































式 文件 应 放置 于 res 











文件 夹 内 ， 
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e。 icon 文件 夹 用 来 存放 App 图 标 ， 主 于 测试 版 本 使 用 ， 应 在 编译 正式 上 架 版 本 前 删除 ; 
。 launch 文件 夹 用 来 存放 App 欢迎 图 ， 主 要 用 于 测试 版 本 使 用 ， 应 在 编译 正式 上 架 版 本 
前 删除 。 
出 于 测试 目的 ， 添 加 的 测试 图 片 、 音 频 、 视 频 等 文件 应 单独 创建 文件 夹 放 置 ， 并 在 编译 正 
式 上 架 版 本 前 删除 。 
APICloud 应 用 与 一 般 前 端 Web 页 面 不 同 ， 用 于 单独 页 面 的 CSS 样式 代码 和 ]S 代码 建议 直接 
在 该 页 面 的 html 文件 内 写 入 ， 不 需要 将 代码 分 离 出 来 单独 创建 与 文件 同名 的 “.css” 和 和 “js” 文件 。 
基于 上 条 原则 ，CSS 文件 夹 主要 放置 可 被 多 个 页 面 引 用 的 通用 样式 的 “.css” 文 件 ; js 文件 
夹 主 要 放置 可 被 多 个 页 面 引 用 的 公 js” 文 件 或 功能 独立 可 复 用 的 “.js” 文 件 。 
原则 上 不 要 修改 项 目 创 建 时 自动 建立 的 官方 api.css 和 apijs 文件 ， 以 防 该 文件 在 后 续 出 现 迭 
代 版 本 时 无 法 顺利 替换 迭代 。 











2. 使 用 APICloud 5 大 组 件 (Widget、 Layout、Window.、Frame.UIModules) 进行 App 的 


UI 架构 设计 

项 目 窗口 应 使 用 Window+Frame 的 结构 ， 静 态 的 、 无 需 频繁 更 新 的 tide 和 导航 栏 、 
部 分 放 在 Window 中 ， 需 要 实时 更 新 ， 响 应 用 户 操作 的 放 在 Frame 中 。 

SPA 的 模式 不 适合 App 开发 ，DIV+JS 的 窗口 切换 影响 用 户 体 验 。APICloud 的 UI 
可 以 从 整体 上 解决 H5 在 Interaction、Animation 和 Render 方 面 的 性 能 问题 。 
3。 多 个 高 度 一 至， 位 置 一 致 的 窗口 应 使 用 frameGroup 

使 用 frameGroup 可 以 提高 一 组 Frame 之 间 互 相 切 换 的 性 能 及 体验 。 

建议 使 用 frameGroup 来 实现 Frame 的 切换 ， 要 按 需 合理 配置 预 加 载 的 Frame 数量 ， 
Frame 要 有 了 明显 的 刷新 机 制 ， 不 能 每 次 切换 都 进行 刷新 和 重 绘 。 



























































































































































4. 使 用 api 方 法 打开 窗口 















































































































































































































































































































































结构 设计 


页 脚 等 
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2 

















































































































































































































使 api.openFrame/api.openFrameGroup 时 ， 应 使 用 auto 结合 margin 布局 ， 这 样 Frame 页 
高 度 就 会 动态 跟随 在 屏幕 高 度 变 化 。 
App 在 不 同 的 手机 上 运行 会 出 现 屏幕 尺寸 发 生变 化 的 情况 。 如 iPhone 手机 共享 热点 时 ， 会 
页 面 顶 部 空间 ， 华 为 手机 的 虚拟 按键 会 占用 页 面 底部 空间 等 。 这 些 导 致 屏幕 高 度 发 生变 化 
的 事件 都 有 可 能 在 Frame 页 面 打开 以 后 发 生 ， 如 果 不 使 用 margin 布局 ， 就 会 出 现 页 面 显示 错误 ， 
导致 项 目 漏洞 产生 。 


























参考 示例 代码 如 下 : 


var eHeader 
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$api.byId('header'); 


$api.fixstatusBar (eHeader); 


var headerHeight 
Var eFooter 


$api.fixTabBar (eHeader); 


var headerHeight 


api.openFrame ({ 


name: 
关东 册 汉 
rect: 


marginLeft: 

marginRight: 
marginTop: 
marginBottom: 


"Page '， 
'./page.html', 
{ 

0， 
0， 
本 205 


$api.offset (eHeader) 
$api.byId('footer'); 


$api.offset (eHeader) 


oi 


i 


480 
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据 实 际 应 





情景 注意 bounces (控制 页 面 弹 动 )、 


















































om 














场景 逻辑 


lidBackEnabled 


类 型 : 布尔。 


默认 值 


描述 :〈 可 选项 ) 是 否 支 持 滑动 返回 


该 字段 只 ios 有 效 。 


:true。 


、customRefreshHeader ( 























delay (延迟 页 


“ 














面 YY ES ) 加 





























定义 下 拉 刷 寺 数 的 配 





和 使 
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点 击 状态 栏 跳 转 页 





启 iOS 的 侧 清 返 








民 制 ， 应 
































顶部 的 功 














oi0S7.0 及 以 上 系统 中 ， 在 新 打 





的 页 面 中 向 右 滑 动 ， 可 以 返 












































































































































回 到 上 一 个 页 面 ， 


op 





scrollToTop 
类 型 : 布尔 。 
默认 值 : false。 
描述 :〈 可 选项 ) 当 点 击 状态 栏 ， 页 面 是 否 滚动 到 顶部 。 若 当前 屏幕 上 不 止 一 个 页 面 的 scrollToTop 属性 为 Etrue， 
则 所 有 的 都 不 会 起 作用 。 只 ios 有 效 。 此 效果 在 FrameGroup 中 使 用 的 时 候 要 注意 确保 只 有 当前 显示 的 Frame 的 scrollToT 
属性 为 true， 其 他 Frame 的 scroll1ToTop 属 性 为 false。 
如 果 没 有 特别 要 求 ， 尽 量 使 用 平台 默认 的 动画 效果 ， 即 api.openWin 时 不 指定 动画 类 型 
使 用 默认 值 。 
































无 论 是 在 Android 还 是 iOS 上 ，APICloud 引擎 会 从 整体 上 保守 


FE 








最 好 的 三 星 


警 这 染 优 人 
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在 Android 平台 上 进行 

















Android6.0 及 以 上 手机 ， 可 以 尝试 在 云 编 
本 所 加 载 的 静态 
Window 的 时 候 可 以 尝试 使 


























E 默 认 的 窗口 动画 























对 的 时 候选 择 使 
网 页 内 容 比较 多 (如 : 初始 的 Dom 树 很 大 或 


movein 或 fde 的 动画 类 型 。 














S| 

















dl 























5. 标准 APICloud App 页 面 按 以 下 页 面 编码 结构 进行 开发 
示例 代码 如 下 : 


D0000000000000 https//yabook.org 
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<!idoctype html> 
<html> 


<head> 
<meta charset="utf-8"> 


<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user- 


scalable=0, initial-scale=1.0,width=device-width" /> 


<meta name="format-detection" content="telephone=no,email=no,date=no,address=no"> 


<title>Hello App</title> 
<link rel="stylesheet" type="text/css" href="./css/api.css" /> 
<style type="text/css"> 


/* CSS 样 式 代 码 */ 


</style> 
</head> 
<body> 

<!-- _ HTML 静态 页 面 代码 
</body> 


<script type="text/javascript" src="./script/api.js"></script> 
<script type="text/javascript" src="./script/db.js"></script> 
<script type="text/javascript"> 

/* JS 逻辑 代码 有 
</script> 


</html> 


A.2.2 文件 命名 


1. 基本 原则 
全 部 使 用 小 写 英 文字 母 及 下 划 线 进行 命名 。 










































































存在 
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ES 
3 
EE 
,到 
z 
CE 








的 资源 文件 在 某 些 手 











时 i i A 二 
禁 使 用 大 写 英 文字 母 ， 包 含 大 写 5 














容 问 题 ， 出 现 
































汁 




















无 法 找到 资源 的 错误 。 同 时 ， 禁 止 使 文字 符 ， 原 生 系统 























部 不 支持 带 中 文字 符 的 资源 名 。 



































例如 ， 在 自 定义 Loader 中 运行 没有 问题 但 云 编译 的 包 就 有 问题 ， 出 现 页 面 无 法 加 载 或 资 
















































































源 找 不 到 等 情况 ， 通 常 就 是 使 用 了 允 或 大 写 的 文件 名 。 因 为 官方 Loader 或 自 定义 Loader 的 



































































































































Widget 是 存放 在 SD 卡 中 ， 而 云 编译 后 的 安装 包 Widget 是 存在 应 用 的 沙 箱 中 ， 沙 箱 是 要 采用 原 












































生 系 统 的 内 部 资源 文件 管理 机 


dt 
A 



























































应 采用 英文 单词 作为 语义 化 内 容 ， 语 义 单词 应 准确 精练 ， 能 够 体现 文件 内 容 











Login.html。 



































以 外 ， 建 议 语义 英文 单词 之 间 使 用 下 划 线 “_” 进 行 连接 。 











2. CSS 类 型 .JS 类 型 文件 















































接 使 用 原名 称 即 可 ; 开发 人 员 封 装 的 通 
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引用 第 三 方 的 CSS 框架 、JS 框 


CSS、JS 文 
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件 ， 文件 命名 语义 应 能 体现 出 此 文件 的 功能 





玉 





3. HTML 类 型 文件 
。 页 面 窗口 属性 为 Frame 时 ， 文 件 名 尾部 建议 加 入 fm 标识 ， 如 person_frm.html ; 
。 页 面 窗口 属性 为 Window 时 ， 无 须 追加 尾部 标识 说 明 ， 
。 语义 化 、 层 级 化 进行 文件 命名 。 










































































































































































文件 名 的 英文 单词 语义 应 能 表达 当前 页 面 功能 内 容 及 页 面 间 的 父子 层级 结构 。 建 议 避 免 使 
文件 夹 方式 区 分 html 页 面 文件 ， 可 改 为 将 文件 夹 名 称 作为 带 有 语义 的 单词 ， 使 用 下 划 线 “ 
连接 的 方式 给 文件 命名 ， 示 例如 下 。 















































































































































App 主页 面 为 home( 首页 )、message (消息 ) 、my( 我 的 ) 页 面 ， 页 
点 击 跳 转 到 搜索 页 面 。 











漂 
并 

















索 按 钮 ， 



































































































































原来 我 们 可 以 在 HTML 文件 夹 中 建立 3 个 文件 夹 ， 如 home、message 和 my ; 然后 在 home 
文件 夹 下 再 建立 search.html 文 件 ， 如 果 search 这 个 模块 页 面 很 多 ， 也 有 可 能 再 建立 search 文件 夹 ， 
接着 再 在 这 个 serach 文件 夹 内 建立 main.html 文件 。 

































































































































































册 在 我 们 建议 改 成 这 样 : home_search.html，home_search_frm.html 或 home_search_main.html。 









































这 样 做 的 好 处 是 所 有 页 面 都 在 html 下 ， 是 平 级 关系 。 这 样 在 引用 .css 文件 和 js 文件 时 就 不 
需要 过 多 考虑 文件 之 间 的 层级 关系 ， 也 有 利于 页 面 的 复 用 和 通用 方法 的 封装 。 









































































































































4. Imgae 类 型 文件 


e。 icon 图 标 类 图 片 使 用 icon 标识 开头 ， 如 icon_person_avatar.png 用 户头 像 ; 













































































户 起 


。 和 背景 类 图 片 使 用 bg 标识 开头 ， 如 bg_person.jpg 景 ; 
。 占 位 图 、 缺 省 图 、 默 认 图 等 此 类 图 标 ， 使 用 default 标识 开头 ;此 优先 级 高 
bg， 如 default_icon_avatar.png 默认 头像 ; 





















































































































































于 上 述 icon、 





















































. 和 时 测试 图 片 ， 应 使 用 test 标识 开头 ， 如 test_house.png。 







































































JavaScript 类 型 文件 在 引用 第 三 方 的 JS 框 架 时 直接 使 用 原名 称 即 可 。 发 人 员 封 装 的 通用 ]S 
文件 ， 文 件 命名 语义 应 能 体现 出 此 ]S 文件 的 功能 
A.2.3 项 目 安 全 


1. 基本 原则 


户 输入 的 密码 应 进行 散 列 算法 〈 如 MD5、SHA1 等 不 可 首 算 法 ) 加 密 处 理 ， 禁 止 明 文 发 
送 和 本 地 存储 。 项 目 在 条 件 允 许 的 情况 下 ， 建 议 网 络 请 求 优先 使 用 HITPS 协议 ， 以 保障 项 目的 
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通讯 数据 安全 。 














2. 第 三 方 支付 
在 支付 业务 中 ， 如 支付 宝 、 微 信 等 密 钥 都 必须 存放 在 服务 器 端 ， 不 应 暴露 在 App 代码 中 。 支 
付 订 单 金额 应 由 服务 器 产生 ， 服 务 器 一 定 要 对 支付 宝 、 微 信服 务 器 回调 的 支付 结果 做 最 终 校 验 。 
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HH 














rp 





























































































































比如 alipay 模块 要 调用 payOrder 方法 来 支付 ， 自 己 处 理 订单 信息 以 及 签名 过 程 ， 不 要 使 
config 接口 和 pay 接口 把 订单 信息 以 及 签名 过 程 交 予 模块 内 部 处 理 (官方 提供 此 种 支付 方式 只 是 
为 了 方便 开发 者 调试 )。 






































































































































3. 去 编译 

选择 全 包 加 密 进 行 云 编 译 : 开发 过 程 中 每 次 云 编译 的 测试 包 或 者 正式 包 都 建议 选择 全 包 加 
密 ， 因 为 在 APICloud 定制 平台 上 ， 客 户 可 以 全 程 监控 项 目的 实施 过 程 ， 可 以 查看 代码 提交 乡 
录 ， 但 是 没有 获取 代码 的 权限 ， 客 户 可 以 查看 云 编译 纪录 ， 如 果 编 译 的 安装 包 没 有 使 用 全 包 加 
密 则 客户 可 能 通过 解压 安装 包 轻 松 获取 App 的 H5 源码 ， 从 而 影响 后 续 项 目 款 的 按时 支付 。 





































































































CU 











































































































































































































4. config .xml 配置 
config.xml 中 的 checkSslTrusted 配置 项 配置 是 否 检 查 https 证 书 是 受信 任 的 ; appCertificateVerify 
配置 项 配置 是 否 校 验 应 用 证 书 ， 知 配置 为 rue， 应 用 被 重 签 名 后 

















































































































百 将 无 法 再 使 
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config.xml 中 的 access 配置 项 可 以 配置 在 哪些 类 型 的 页 面 里 可 以 访问 APICloud 的 扩展 API 


方法 、 可 访问 域 的 设置 以 及 越狱 限制 等 。 










































































5. 数据 安全 
对 重要 参数 变量 进行 必要 的 加 密 处 理 ， 将 重要 的 常量 数据 放 入 key.xml 中 ， 使 用 api. 
loadSecureValue 方法 进行 数据 读 取 ; 如 第 三 方 SDK 模块 使 用 的 AppId 及 SecretKey 等 涉及 项 目 宛 
全 性 的 重要 数据 信息 及 对 隐私 要 求 比较 高 的 数据 信息 ， 则 在 放 在 res 文件 夹 里 的 key.xml 文件 中 ， 
云 编译 时 云 服务 器 会 自动 加 密 key.xml 文件 ， 从 而 保证 数据 的 信息 安全 。 




















































































































































































































































































































A.2.4 UI 页 面 


1. 基本 原则 
应 严格 按照 UI 尺寸 图 标注 进行 页 面 开 发 ，H5 页 面 
优先 考虑 绝对 计量 类 的 单位 px， 要求 精细 到 0.5 px。 












































的 实现 要 与 UI 尺寸 完全 一 致 ， 量 图 应 




















































































































ily 











前 APICloud 的 UI 尺寸 图 的 标注 与 前 端 App 开发 的 标注 尺寸 是 2 倍 的 关系 : 



































附录 A ”APICloud App 客户 端 开发 规范 (Version 1.0) 275 






































。 如 UI 尺寸 图 中 标注 一 个 按钮 的 宽 高 尺寸 是 88 px， 则 开发 设 定 的 元 素 宽 高 为 4 px ; 
。 如 UI 尺寸 图 标注 一 个 分 割 线 的 宽度 为 1 px， 则 开发 需要 实现 0.5 px 宽 的 细 线 。 

































































































































































































































































使 用 相对 布局 ， 保 证 页 面 可 适 配 不 同 屏幕 尺寸 的 手机 。 页 面 图 片 元 素 高 度 应 能 根据 屏幕 宽 
度 进行 等 比例 换算 ， 以 保证 图 片 不 出 现 拉 伸 变形 。 
2.“ 沉 浸 式 ” 效 采 处 理 原则 

如 无 特殊 说 明 ， 默 认 情 况 下 APICloud 项 目 均 应 开启 “沉浸 式 ”效果 。 在 config xml 文件 


















































配置 如 下 代码 : 





<preference name="statusBarAppearance" value="true" /> 
































当前 界面 的 背景 颜色 ， 通 过 调用 api.setStatusBarStyle 的 方法 来 设置 当前 状态 栏 的 风格 
或 背景 色 。 这 里 要 求 更 新 最 新 版 的 apijs 文件 ， 用 以 支持 iPhoneX 型 号 手机 的 屏幕 适 配 。 
















































































































































































官方 最 新 的 apijs 框 加 了 对 iPhoneX 的 屏幕 适 配 方法 $apifixStatusBar 和 $api. 
fxTabBar， 应 及 时 更 新 应 用 内 使 用 的 apijs 文件 。$api.fxStatusBar 和 $api.fxTabBar 使 用 了 api. 
safeArea 方法 ， 所 以 沉 温 式 应 放 在 apiready 方法 中 调用 实现 。 


Hi 
过 
了 区 
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最 新 版 本 apijs 文件 的 获取 方法 ， 在 官网 控制 台 创 建 一 个 Navtive 项 目 ， 将 项 目 源码 下 载 到 
本 地 ， 项 目 script 文件 夹 下 的 apijs 就 是 最 新 版 本 的 。 












































3. 图 片 处 理 原则 

。 减少 内 存 占用 。 
在 App 中 ， 图 瞩 过 多 内 存 从 而 引起 程序 假死 、 崩 演 或 其 他 多 种 异常 状态 的 事例 数 不 胜 
数 。 应 尽量 减少 图 片 对 内 存 的 占用 。 示 例如 下 : 
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Ls, Es As 二 1 1 
到 片 内 存 算法 :ram = 图 片 宽度 x 图 片 高 度 x 4。 









































。 分 辨 率 为 200 的 图 片 :200 x 200 x4 = 160 KB。 
。 分 辨 率 为 600 的 图 片 :600 x 600 x 4 = 1.44 MB。 



































Hl 




















两 者 相差 9 倍 ， 所 以 在 可 满足 体验 效果 时 尽 可 能 使 用 分 辨 率 低 的 图 片 。 

















。 减少 缩放 图 片 。 




































































片 缩放 时 会 消耗 很 高 的 性 能 ， 应 避免 发 生 。img 标签 多 大 ， 图 片 就 应 多 大 。 列 表 中 的 头 
像 等 缩 略图 ， 宽 高 应 控制 在 250 ~ 300 px 之 间 ， 小 于 这 个 范围 在 大 屏 手 机 上 容易 失真 ， 大 于 这 
个 范围 则 会 消耗 更 多 内 存 和 性 能 。 







































































att 
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。 客户 端 与 服务 器 配合 解决 。 

可 以 通过 客户 端 传 参 ,服务器 动态 返回 处 理 后 的 图 片 解 决 上 述 问题 ， 也 可 利用 第 三 方 云 存 
储 现 有 的 缩 略 图 服务 ， 如 阿里 云 的 oss。 

。 使 用 apiimageCache 时 必须 手动 进行 图 片 的 缓存 处 理 。 

Webview 默认 的 缓存 机 制 存在 缺陷 ， 在 跨 窗口 时 表现 不 好 ， 并 且 存 在 对 所 缓存 图 片 的 尺寸 限 
制 等 问题 。 所 以 APICloud App 的 图 片 缓存 不 能 依赖 Webview 默认 的 缓存 机 制 ， 必 须 手动 实现 。 

。 使 用 默认 占 位 图 。 

异步 加 载 的 图 片 类 页 面 元 素 ， 应 在 页 面 数据 加 载 前 显示 默认 占 位 图 。 要 求 该 占 位 图 片 尺 二 
大 小 与 UI 设计 尺寸 相同 ， 可 让 UI 设计 提供 相应 尺寸 以 便 切 图 。 













































































































































































































































































页 面 请 求 
















































































应 避免 body 级 别 的 背景 ， 要 以 原生 的 方式 高 效 蔡 代 。 就 是 可 在 openWin 或 openFrame 时 
传 入 bgColor ; 也 可 在 config.xml 中 配 局 背景 。 

这 里 不 建议 通过 给 body 元 素 指定 background 的 方式 实现 body 级 别 的 背景 图 片 ， 特 别 是 高 
清 的 大 背景 图 片 用 H5 方式 实现 会 严重 影响 泻 染 性 能 。 
4. 列表 处 理 原则 

在 列表 显示 内 容 数 据 存在 动态 变化 可 能 时 ， 应 实现 添加 下 拉 刷 新 功能 ， 在 api 接口 支持 多 

， 应 实现 上 拉 加 载 功能 。 
api.refreshHeaderLoading 开始 刷新 方法 须 户 下 拉动 作 触 发 ， 禁 止 程序 自动 调用 该 方法 加 
















































































载 数 据 ， 因 为 这 样 会 导致 页 面 自动 模拟 下 拉动 作 ， 显 得 很 突 元 。 
在 列表 获取 数据 为 空 时 ， 应 显示 空 数 据 占 位 背景 图 












































等 JavaScript 的 方式 来 实现 滚动 。 








列表 页 面 的 滚动 。 














5. 按钮 处 理 原则 




















先 消 
应 在 绑 定 每 个 oncli 




















tabmode 属性 针对 APICloud 消 








在 HIML 标签 代码 

































































ck 事件 的 同 扩 























建议 使 





绑 定 tapmode 贞 
































除 click 的 300 ms 延迟 响应 ， 浏 览 器 的 点 击 事件 触发 默认 





FS 











盟 性 。 








。 深 动 效 果 要 平滑 流畅 ， 不 能 使 
Window+Frame 的 UI 结构 ， 以 Native 的 方式 来 实现 























iscroll 











300 ms 或 更 长 的 延迟 。 




































































的 onclick 事 


从 
























































除 300 ms 延迟 的 问题 专门 定制 了 私有 属性 。 具 体 使 用 方法 如 下 。 
， 直 接 写 入 tapmode 属性 ， 代 码 如 下 : 
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<div tapmode="touched" onclick="fnSelected (this)"> 好 评 优先 </div> 






























































使 用 JavaScript 动态 加 载 到 html 页 面 中 的 元 素 的 onclick 事件 ， 除 按 上 述 要 求 书写 外 ， 还 须 
使 用 api.parseTapmode() 方法 来 使 tapmode 属性 生效 。 






















































































默认 页 面 加 载 完 成 后 ， 引 警 会 对 dom 里 的 元 素 进 行 tapmode 


建 的 dom 元 素 ， 则 需要 调用 该 方法 后 tapmode 属性 才 会 生效 。 
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耳 
| 





盟 性 解析 ， 若 是 之 后 用 代码 创 








































































































要 注意 apiparseTapmode 调用 会 有 性 能 成 本 ， 不 需要 的 情况 下 不 要 随便 调 











中 











































































































此 外 ， 要 提升 点 击 反 馈 和 点 击 区 域 ， 应 给 每 个 apmode 属性 赋值 一 个 CSS 样式 ， 实 现 点 击 
反馈 效果 。 
在 移动 应 于 用 户 的 交互 形式 主要 以 手指 触 控 为 主 ， 与 屏幕 的 接触 面 较 大 ， 应 尽量 设 



































































































































大 小 合理 的 点 击 区 域 以 提高 用 户 交 互 体验 ， 这 里 可 使 用 background-size。 



















































































增加 按钮 连续 点 击 的 判断 逻辑 ， 防 止 因 用 户 的 多 次 点 击 导 致 业务 逻辑 多 次 重复 执行 ， 引 发 
不 必要 的 效率 损耗 并 产生 逻辑 上 的 异常 错误 。 



































A2.5 数据 处 理 






























































应 使 用 api.ajax 进行 网 络 数据 请 求 ， 并 且 设 置 合适 的 超时 时 间 ， 对 超时 和 请 求 失 败 的 异常 情 
况 应 编写 相应 的 处 理 逻 辑 代 码 。 要 避免 使 用 JavaScript 原生 ajax 方法 或 其 他 JavaScript 框架 封装 的 
ajax 方法 进行 网 络 请 求 。 因 为 在 云端 编译 项 目 版 本 时 ， 特 别 是 启用 代码 加 密 时 ， 会 发 生 异 常 导 致 
App 出 现 功能 错误 。 如 JQuery 的 ajax 在 开启 全 包 加 密 的 时 候 就 会 有 问题 。 















































































































































































































































根据 项 目的 业务 需求 和 实际 情况 ， 合 理 利 





五 





选项 ， 如 dataType、charset、headers、returmAl 等 。 
























































监听 网 络 状 态 ， 根 据 实 际 业务 需求 编写 回调 处 理 逻 辑 ， 保 证 项 目 在 不 同 网 络 状态 下 均 可 合 


里 运行 。 在 api 下 的 监听 事件 有 online、offline 和 connectionType 





























































































































建议 适度 封装 api.ajax 请 求 。api.ajax 请 求 在 项 发 中 的 使 用 范围 广 、 使 用 频率 高 ， 并 


ajax 请 求 及 响应 部 分 均 包含 有 可 被 抽象 定义 的 参数 或 逻辑 ， 所 以 建议 对 ajax 请 求 进行 合理 的 适度 
封装 ， 使 数据 交互 逻辑 层次 更 清晰 、 代 码 使 用 更 高 效 ， 同 时 也 利于 后 期 的 维护 开发 
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例如 可 以 对 请 求 接口 地 址 ur 中 的 根 路 径 进 行 抽象 定义 。 网 络 请 求 地 址 ud 中， 通常 由 “ 根 
路 径 ” 和 “相对 路 径 ” 组 成 ， 不 同 API 接口 的 根 路 径 是 固定 不 变 的 ， 变 化 的 只 是 后 面相 对 路 径 
部 分 。 在 ajax 的 封装 方法 中 把 根 路 径 作为 一 个 内 置 参数 对 象 ， 这 样 在 以 后 服务 器 地 址 改变 ， 如 
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ip 地 址 改 为 域名 地 址 或 
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域名 更 换 时 ， 我 们 就 不 需要 逐一 修改 每 一 个 请 求 方法 ， 只 需要 简单 的 
修改 封装 方法 内 的 根 路 径 内 置 参数 的 变量 值 就 可 以 了 。 
编制 jjax 请 求 的 异常 处 理 逻 辑 ， 保 证 App 程序 的 健壮 性 和 良好 的 用 户 体验 ， 示 例如 下 。 





api .ajax 请 求 世 


























0 // 连 接 错 误 
1 // 超 时 


2 Wy 


受权 错误 


3 // 数据 类 型 错误 






































调 错 误 码 信 息 : 





































































































































































































































































































































































































对 于 页 面 内 容 需 要 等 待 ajax 请 求 完 成 后 加 载 的 页 面 ， 应 显示 进度 状态 提示 ， 以 提升 用 户 体 验 。 

请 求 响 应 数据 的 缓存 处 理 。 如 页 面 内 的 ajax 请 求 方法 使 用 频繁 ， 且 请 求 的 响应 数据 内 容 变 
频率 低 ， 则 应 对 此 请 求 的 响应 数据 进行 本 地 缓存 处 理 ， 以 提高 应 用 在 断 网 或 网 速 不 佳 时 的 页 
本 加 载 速度 ， 提 升 用 户 体 验 。 

对 于 GET 类 型 的 请 求 方式 ， 可 将 cache 参数 设置 为 tue，api.ajax 将 自动 对 此 Get 请 求 进行 
缓存 处 二 > 于 

CCne 

类 型 : 布尔 

默认 值 : false 

描述 :〈 可 选项 ) 是 否 缓存 ， 若 缓存 ， 下 次 没 网 络 时 请 求 则 会 使 用 缓存 ， 仅 在 get 请 求 有 效 

对 于 POST 类 型 的 请 求 方式 ， 根 据 实际 业务 场景 需求 ， 如 不 涉及 复杂 业务 返回 的 仅 是 列表 

















展示 类 数据 


























2. 数据 本 地 化 








少量 数据 可 以 使 
































行 缓存 数据 ， 优 化 数据 交互 逻辑 。 














$api.setStorage 或 api.setPrefs 方 式 进 














行 本 地 数据 缓存 。 


$api.setStorage 可 以 执行 保存 JSON 对 和 象 ，apisetPrefs 则 不 能 ， 必 须 将 JSON 对 象 序列 化 为 











JSON 字符 串 


setStorage 则 不 会 。 


































































































































































































后 方 可 保存 。 
api.setPrefs 缓存 的 数据 ， 在 iOS 通过 数据 线 进行 应 份 时 ， 数 据 会 同步 备份 ， 而 $api 
大 容量 数据 可 以 使 用 写 文件 的 方式 或 使 用 db 模块 ， 以 数据 库 方式 保存 数据 ， 文件 读 写 可 使 
api.readFile/api.writeFile 或 使 用 人 模块 方法 。 
3. 页 面 间 的 跨 域 数据 传 值 
根据 业务 场景 逻辑 ， 选 择 合适 的 方式 进行 数据 传输 ， 具 体 如 下 : 
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e。 在 api.openWin 或 api.openFrame 了 时， 使 用 api.pageParam 参数 进行 传 值 ， 将 数据 本 地 化 后 ， 
在 其 他 页 面 直接 进行 缓存 读 取 ， 获 取 数据 值 ; 
e 使 用 apiaddEventListener 监听 事件 ， 同 时 使 用 api.sendEvent 方法 发 送 事 件 通 知 ， 并 携带 
传 值 的 参数 ， 


。 使 用 api.execScript 通过 函数 形 参 进行 传 值 。 










































































































































































































































































Hl 





优先 考虑 使 用 apipageParam， 但 要 避免 使 用 过 大 的 pageParam。 尽 可 能 地 减少 监听 方法 的 使 
以 降低 手机 cpu 的 线程 、 性 能 消耗 ， 也 要 避免 问号 传 参 ， 问 号 传 参 会 有 找 不 到 资源 的 兼容 风险 。 


































































































SS 



































同时 ， 不 要 使 用 使 用 URL+? 的 








参数 的 传递 ， 此 方式 在 Android 上 存在 兼容 问题 。 








NN 


武进 



















































































页 面 间 逻辑 交互 ， 优 先 使 用 apiexecScript， 必 要 时 再 使 用 监听 方法 。 当 使 用 JSON 对 象 作 
为 api.execScript 方法 的 形 参 时 ， 须 将 JSON 对 象 序列 化 为 字符 串 后 再 作为 形 参 传递 。 
A2.6 编码 优化 


1. 弹出 键盘 优化 处 理 


输入 框 位 于 设备 屏幕 下 半 部 份 的 应 用 场景 ，config.xml 中 的 键盘 蚤 
务必 设置 为 resize 模式 ， 或 者 使 用 UIInput 相关 模块 。 
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FE 




















H 模 式 参 数 softInputMode 


























































































































为 了 让 应 用 看 起 来 更 接近 原生 ， 尽 量 配 置 config.xml 中 的 softInputBarEnabled 参数 来 隐藏 iOS 键 
盘 上 面 的 工具 条 。 也 可 以 在 openWin 或 openFrame 的 时 候 通 过 softInputBarEnabled 参数 来 单独 指定 。 


































































































2. 项 目 字 体 优化 处 理 
可 以 根据 项 目的 需要 引入 外 部 字体 ， 但 是 要 控制 外 部 字体 文件 的 大 小 ， 字 体 文 件 不 宜 过 大 。 

























































































Android 上 默认 有 3 种 字体 : sans、serif 和 monospace， 在 开发 人 员 不 指定 的 情况 下 默认 为 
sans， 这 3 种 字体 在 开发 过 程 中 都 是 通过 字体 名 进行 引用 ， 系 统 会 自动 对 应 到 内 置 字体 文件 。 但 
是 对 于 外 部 的 字体 文件 ，Android 上 无 法 实现 通过 引擎 配置 后 成 为 内 置 的 字体 文件 ， 只 能 通过 @ 
font-face 的 方式 在 每 个 页 面 中 重复 加 载 ， 每 一 个 要 使 用 外 部 字体 的 Window 或 Frame 都 要 引入 
一 遍 。 如 果 字 体 体 积 过 大 会 占用 大 量 内 存 ， 影 响 页 面 的 加 载 速度 。 




























































































































































































































































































区 
bb 
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iOS 可 以 在 config.xml 文件 中 进行 外 部 字体 文件 的 配置 ， 配 置 完成 后 就 可 以 像 系统 内 置 字体 
样 在 页 面 中 指定 了 ， 无 需 在 每 个 Window 或 Frame 中 通过 @font-face 的 方式 引入 。 





























































































































3. 同步 /异步 逻辑 优化 处 理 


对 于 文件 、 数 据 库 、 偏 好 设置 等 操作 推荐 使 用 同步 接口 (方法 名 增加 Sync 后 级 ) 来 简化 代 
码 的 实现 ， 以 解决 异步 callback 层次 过 深 的 问题 。 
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日 志 打 印 优 化 处 理 


E 式 版 本 应 关闭 或 删除 测试 联 调 时 使 用 的 console.log1 
出 现 供 测试 联 调 使 用 的 alert 信息 。 





























局 下 





出 台 打 印 显 示 方 法 ， 严 禁 正 式 版 本 





Hr 




























































































可 考虑 封装 统一 的 日 志 打 印 显 示 方 法 在 测试 联 调 时 使 用 ,方便 控制 日 志 打 印 功 能 的 开启 和 
关闭 。 测 试 联 调 优先 使 用 控制 台 打印 命令 console.log， 避 人 免 或 减少 使 用 alert 方法 进行 测试 联 调 ， 
防止 正式 版 本 有 遗漏 ， 弹 出 测试 数据 信息 。 
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5. 用 户 体验 优化 处 理 


对 于 内 容 数据 存在 动态 更 新 情况 的 页 面 ， 应 实现 页 面 下 拉 刷 新 功能 以 保证 用 户 可 以 手动 刷 
新 页 面 数据 。 



























































































































































Re | 
































根据 业务 场景 优化 用 户 | 戎 虑 实现 对 Apb 进入 后 台 和 前 台 的 事件 监听 和 逻辑 处 理 。 
在 异常 处 理 逻 辑 需 要 显示 异常 信息 时 ， 根 据 异 常 的 重要 程序 选择 使 用 alert 或 toast 方式 进行 提示 。 
要 注意 api.alert 会 阻塞 线程 ， 强 制 用 户 点 击 后 程序 才能 继续 执行 ， 适 合 在 需 户 明确 确认 的 场 
景 内 使 
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窗口 关闭 处 理 是 在 开发 过 程 中 根据 需要 处 理 Android 的 keyback 事件 和 iOS 的 











ke 








滑 手 势 。 






































。 Android 上 要 在 Window 中 才能 监听 到 keyback 事件 ，Frame 中 无 法 监听 到 keyback 事 伯 

。 在 iOS7 以 上 的 系统 上 可 以 在 openWin 的 时 候 通过 设置 idBackEnabled 参数 来 实现 是 否 

支持 回 滑 手 势 关 闭 窗口 的 功能 。 

。 在 后 台 关闭 非 当 前 显示 页 面 时 ， 应 设置 animation:{type:"none"}， 关 闭 动画 效果 方式 ， 
以 免 页 面 关 闭 动画 影响 当前 显示 页 面 的 泻 染 ， 从 而 降低 用 户 体验 。 
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6. 性 能 优化 处 理 


量 不 对 Object 和 Array 拓展 原型 方法 ， 有 可 能 导致 iOS 系统 的 Apb 内退。 同时 避免 不 必 


要 的 DOM 操作 ， 浏览 器 遍历 DOM 元 素 的 代价 是 昂贵 的 。 当 一 个 元 素 出 现 多 次 时 ， 将 它 保存 
在 个 变 
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避免 使 用 如 jQuery、jQuery Mobile、SenchaTouch、Bootstrap 等 “重型 框架 ”。jQuery 和 
SenchaTouch 等 框架 的 事件 流 设计 思 想 及 其 内 部 文档 模型 会 严重 拖 慢 UI 响应 速度 。 同 时 ， 框 架 内 
部 Timer 不 断 刷 新 页 面 ， 频 繁 CPU/GPU 资源 ， 会 拉 低 页 面 响应 速度 ， 严 重 影 响 用 户 体 验 。 
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也 要 尽量 减少 使 用 第 三 方 样式 、 脚 本 库 或 框架 。 摆 脱 对 $ 函数 的 依赖 ， 转 变 思 想 ， 养 成 自 
己 动 手 的 习惯 。 移 动 端 对 HTML5、CSS3 和 ECMAScript5 的 支持 较 好 。 如 某 些 需求 不 得 不 使 
些 第 三 方 脚 本 时 ， 应 使 中 对 移 动 端 支 持 好 晶 标 性 强 、 功能 单一 的 框架 。 如 :api.js、 zepto. 
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js、swipe.js、do 了 .js 等 





o 



























































默认 样式 设置 、DOM 操作 和 字符 串 处 理 推荐 使 用 APICloud 前 端 框架 (apijs 和 api.css)。 

















7. 窗口 切换 优化 处 理 
避免 出 现任 何 卡 顿 、 闪 屏 、 白 屏 等 情况 ， 要 保证 动画 效果 流畅 ， 不 能 出 现 丢 帧 的 情况 
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要 理解 并 控制 好 切 与 界面 泻 染 之 间 的 关系 ， 要 适时 更 新 UI， 如 果 Window 或 Frame 
所 加 载 的 静态 页 面 内 容 过 多 ， 建 议 等 动画 执行 完毕 再 进行 页 面 的 加 载 和 渲染 。 无 论 是 Android 还 
是 iOS 系统 ， 在 进行 窗口 切换 的 时 候 ， 如 果 窗 体 本 身 正在 进行 演 染 (Window 或 Frame 所 加 载 的 
网 页 没有 演 染 完毕 ) ， 则 会 影响 切换 动画 运行 的 流畅 性 ， 出 现 卡 顿 或 丢 帧 的 情况 。 






























































































































































































































































| 本 





建议 在 打开 Window 或 Frame 的 时 候 ， 如 果 所 加 载 的 静态 网 页 不 能 快速 的 泻 染 完毕 。 为 J 
不 影响 窗 体 切换 动画 的 执行 ， 可 以 在 切换 动画 执行 完毕 后 再 进行 动态 数据 的 加 载 和 界面 的 刷新 。 

















































































































8. 保证 页 面 加 载 速度 
将 样式 、 业 务 逻 辑 代 码 写 在 html 页 面 中 ， 公 用 css、js 库 应 尽量 小 ， 不 要 加 载 无 用 的 css、js。 




















































































































浏览 器 内 部 是 解释 执行 ， 只 要 页 面 中 引入 了 就 会 加 载 和 解析 。 所 以 应 减少 使 用 <link/>、 
<script/> 标签 ， 每 一 个 <link/> 或 <script/> 标签 都 将 让 浏览 器 引擎 进行 一 次 同步 i/o 读 写 。 


























































































































一 段 脚 本 放置 在 内 ， 其 加 载 会 影响 或 阻塞 DOM 解析 ， 这 会 造成 页 面 显 示 的 延迟 ， 影 响 用 户 体 
验 。 如 无 特殊 需要 ， 应 将 引用 的 JavaScript 文件 和 页 面 内 编写 的 JavaScript 代码 放置 于 结束 标签 之 后 。 
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同时 ， 应 利用 CSS3 及 HTML5 的 特性 ， 尽 量 使 用 CSS3 动画 、 


新 的 input 类 型 等 。 


























En 








角 处 理 、 渐 变 处 理 、 边 框 、 
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9. 编 详 的 正式 版 本 禁止 包含 项 目 未 使 用 模块 


编译 正式 版 本 前 ， 应 检查 一 下 控制 台 选 定 的 模块 是 否 都 在 实际 代码 中 被 使 用 到 。 一 些 开发 
在 开发 过 程 中 会 不 断 引 入 一 些 “ 预 计 使 用 ”或 “测试 使 用 ”的 模块 ， 但 是 在 最 终 的 代码 中 并 
。 这 些 模块 要 在 云 编译 的 时 候 去 掉 ， 无 用 的 模块 不 仅 会 增 大 安装 包 的 体积 ， 还 可 能 引 
起 和 其 他 模块 的 冲突 ， 造 成 编译 失败 。 
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config.xml 文件 中 配置 的 模块 在 控制 台 无 法 删除 ， 因 为 config 中 feature 配置 项 的 forceBind 
属性 默认 为 tue， 是 强制 绑 定 的 。 可 以 通过 修改 config.xml 配 forceBind 属性 来 解除 模块 的 
强制 绑 定 。 
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附录 B 
开发 工具 APICloud Studio 2 使 用 详解 


B.1 概述 


APICloud Studio 2 (以 下 简称 为 Studio2) 是 APICloud 推出 的 一 款 更 适合 前 端 工程 师 的 
移动 App 集成 开发 工具 。 它 基于 前 端 工程 师 偏 爱 的 开源 Atom 编辑 器 深度 定制 ， 与 APICloud 
平台 的 各 种 云端 移动 开发 服务 紧密 结合 ， 是 名 副 其 实 的 新 一 代 “ 云 端 一 体 ”移动 App 快速 
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Susy 


B.2 特性 和 功能 简介 


B.2.1 同时 支持 MacO0S/Windows/Linux 3 个 操作 系统 


Studio2 同时 支持 MacOS/Windows/Linux 3 个 操作 系统 。 在 各 个 操作 系统 上 Studio2 的 功能 



































































































































都 是 同样 的 完整 和 强大 。Studio2 发 布 伊始 ， 即 同时 支持 3 个 操作 系统 ， 这 得 益 于 APICloud 多 
年 以 来 在 开发 者 服务 领域 的 技术 沉淀 ， 更 表明 了 APICloud 始终 坚持 以 开发 者 为 本 、 多 开发 工具 
支持 策略 ， 坚 决 不 影响 开发 者 使 用 习惯 的 产品 理念 。 









































B.2.2 与 APICloud 各 种 云 服务 打通 


Studio2 更 贴近 APICloud“ 云 端 一 体 ” 的 App 开发 理念 。 在 保留 Atom 强大 编码 功能 的 
础 上 ， 如 何 更 优雅 地 与 APICloud 现 有 的 各 种 云 服 务 相 结合 ， 切 实 提 高 开发 者 的 开发 效率 ， 
是 Studio2 着 重 思考 与 努力 优化 的 方向 ， 并 将 其 应 用 于 Studio2 的 开发 过 程 中 ， 努 力 打磨 云端 
业务 与 基础 编码 功能 的 结合 点 ， 实 现 Studio2 和 APICloud 云端 的 互联 互通 。 开 发 者 可 直接 通过 

















I 























































































































































































































































































































附录 B 发 工具 APICloud Studio 2 使 用 详解 283 












































Studio2 中 的 各 项 操作 菜单 ， 快 速 对 某 App 进行 云端 操作 ， 几 乎 不 需要 单独 打开 浏览 器 就 可 以 完 
整 使 用 APICloud 的 各 种 云 服 务 。 





















































B.2.3 代码 使 用 Git 管 理 ， 无 网 络 提交 代码 




































































APICloud 云端 代码 管理 主要 以 SVN 的 方式 提供 服务 ， 开 发 者 可 以 使 用 小 乌 怨 等 工具 进 # 
代码 管理 操作 。 为 满足 发 者 管理 代码 的 操作 习惯 ， 在 Studio2 中 ， 我 们 使 用 Git 作为 主要 
的 代码 管 具 。Studio2 内 置 git-svn 技术 ， 以 Git 的 操作 方式 兼容 SYN， 使 广大 APICloud 
发 者 可 以 通过 Git 常用 的 操作 来 管理 自己 的 代码 。 比 如 创建 本 地 代码 分 支 、 无 网 络 时 代码 提交 本 


地 仓库 、 云 端 同步 等 。 
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B.2.4 兼容 Atom 的 插件 和 主题 扩展 机 制 


Studio2 继承 了 Atom 的 插件 和 主题 扩展 机 制 ， 尽 可 能 地 保证 了 工具 的 灵活 性 ， 以 满足 开发 
者 更 多 的 个 性 化 需求 。 用 户 可 以 在 Studio2 中 安装 任何 自己 喜欢 的 Atom 主题 或 者 插件 ，Studio2 


的 插件 设置 和 Atom 编辑 器 是 互相 独立 的 ， 不 会 互相 干扰 。 











































































































































































































B.2.5 同时 支持 i0S 和 Android 设 备 远 程 调试 
Studio2 支持 iOS 和 Android 设备 的 远程 调试 ， 开 发 过 程 中 可 以 直接 在 Studio2 中 对 APICloud 应 
进行 断 点 调试 。 相 比 于 使 用 Chrome 浏览 器 进行 断 点 调试 ，Studio2 更 加 方便 ， 并 且 还 支持 iOS 


2 多 友 . 
文 且 o 






























































































































































B.2.6 支持 Chrome 浏览 器 的 页 面 预 览 功能 

Studio2 使 用 源 于 Chromium 的 devtool 工具 ， 发 者 不 仅 可 以 在 Studio2 中 预览 页 面 效 果 ， 
还 可 以 像 使 用 Chrome 浏览 器 的 开发 4 一样， 动态 修改 样式 、 打 断 点 等 。 在 App 开发 过 程 
， 无 需 单 独 打开 浏览 器 窗口 进行 预览 与 调试 。 
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B.2.7 默认 集成 HIML5 开 发 攻 用 插件 


不 同 的 开发 场景 往往 需要 组 合 使 用 不 同 的 插件 ， 才 能 将 开发 效率 最 大 化 。APICloud 根 和 
身 实 践 经 验 ,， 总结 了 许多 HIML5 开发 中 常用 的 插件 ， 并 将 其 集成 到 了 Studio2 中 ,方便 
接 使 用 。 比 如 “minimnapb” 插 件 ， 可 以 帮助 快速 定位 代码 ; “fle-icons” 插 件 ， 可 以 提高 不 同类 
型 文件 的 辨识 度 ;“emmet” 插 件 ， 可 以 帮助 快速 布局 和 加 速 编 码 等 。 
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B.3 使 用 详解 
B.3.1 下 载 安 装 


进入 APICloud 官网 开发 工具 页 面 (devtook 部 分 ) ， 选 择 自身 操作 系统 对 应 的 版 本 ， 并 将 其 
下 载 到 计算 机 里 。 























































































































(1) 在 Mac 上 安装 Studio2 




















载 完 成 后 解压 到 本 地 ， 并 将 解压 目录 下 的 “APICloud Studio 2” 文 件 手动 复制 或 移动 型 
系统 “应 用 程序 ”目录 。 要 注意 如 果 不 将 “APICloud Studio 2” 文 件 放置 到 系统 “应 用 程序 ” 
录 ， 可 能 导致 Studio2 无 法 进行 “ 增 量 更 新 ”。 


























































































































































































































启动 过 程 中 ， 如 果 系 统 提 示 “ 未 信任 的 开发 者 ， 无 法 打开 ”之 类 的 信息 ， 请 到 “系统 一 信 
好 设置 一 安全 性 与 隐私 ”中 ， 选 择 继续 打开 Studio2 即 可 。 













































































(2) 在 Windows 上 安装 Studio2 




















下 载 完成 后 ， 解 压 即 可 使 用 ， 类 似 名 为 “apicloud-studio-2.exe” 的 文件 ， 即 为 Studio2 的 
启动 程序 。 























(3) 在 Linux 上 安装 Studio2 























下 载 完成 后 ， 解 压 即 可 使 用 ， 类 似 名 为 “abicloud-studio-2” 的 文件 ， 即 为 Studio2 的 启动 
程序 。 




















B.3.2 基础 操作 
1. 登录 ， 注 销 与 切换 账户 


启动 Studio2， 直 接 使 用 已 在 APICloud 官网 注册 的 账号 登录 即 可 。 可 通过 顶部 菜单 一 
APICloud 一 登录 / 注销 完成 退出 登录 操作 。 





































































































2. 新 建 应 用 、 页 面 框 染 和 模板 文件 
通过 “顶部 菜单 一 文件 ~ 新 建 ”， 完 成 新 建 应 用 、 页 面 框架 和 模板 文件 的 操作 ， 如 图 B-1 
所 示 。 
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图 B-1 
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模板 和 页 











新 ， 














以 便 及 时 体验 APICloud 提供 


3. 检查 更 新 


A— 
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Studio2 使 


时 间 不 超 


B.3.3 


次 启 


APICloud 一 检查 更 新 ” 


过 30 秒 。 建 议 























面 框架 模板 会 不 定 


期 更 新 o 建议 














的 最 新 模板 。 
































启动 时 Studio2 会 





























动 检查 更 新 ， 








发 工 


具 APICloud Studio 2 使 用 





收 到 Studio2 更 新 提示 时 ， 选 择 立 即 更 
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也 可 以 在 必要 





进行 操作 。 

















bsdiff 





























代码 管理 














时 手 











动 检查 更 新 。 





算法 来 减 小 增 量 更 新 包 的 体积 ,一 般 增 量 更 新 体积 不 超过 
么 常 升级 Studio2 。 





























通过 “顶部 菜单 一 





寸 100 KB， 更 间 



























































































































































































































































Studio2 将 git-svn 技术 深度 应 用 于 代码 管理 功能 中 。Git 客户 端的 分 布 式 和 可 离线 提交 的 特 
性 ， 可 以 更 方便 开发 者 代码 管理 的 需要 。 借 助 于 git-svn 技术 ， 发 者 只 需 用 Studio2 重新 检 出 
己 的 项 目 ， 就 可 以 立即 使 用 Git 来 管理 了 。 
快捷 键 “cmd+ Shift + P”(MacOS) 或 “Ctrl+ Shift + P”(Windows/Linux) 可 以 唤 
醒 命令 输入 框 。 当 熟悉 Studio2 一 段 时 间 后 ， 可 能 更 喜欢 直接 使 用 命令 来 执行 各 种 操作 。 
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1. 检 出 APICloud 应 用 


可 使 用 checkout 命令 或 通过 “顶部 菜单 一 代码 管理 一 代码 检 出 一 APICloud 云端 应 
来 进行 操作 。 





























































































































Git 默认 检 出 全 部 历史 提交 记录 ， 也 可 手动 输入 HEAD 命令 指定 只 检 出 最 新 版 ， 同时， 支持 
检 出 第 三 方 Git/SVN 仓库 。 























2， 代码 更 新 与 提交 

和 SVN 不同 的 是 ，Git 的 提交 和 同步 操作 是 两 个 独立 的 操作 。 在 与 云端 同步 之 前 ， 需 要 先 
在 本 地 执行 一 次 commit 操作 ;每 次 本 地 commit 之 后 ， 不 需要 立即 提交 到 云端 。 即 使 在 没有 网 
络 的 情况 下 ,依然 可 以 进行 本 地 提交 ; 联网 后 只 需要 提交 向 服务 器 提交 一 次 ， 就 可 以 保留 离线 
时 的 所 有 代码 记录 。 































































































3. 查看 当前 文件 变更 
当 文件 内 容 有 更 新 时 ， 对 应 位 置 和 代码 小 地 图 上 会 有 相应 的 不 同 颜色 的 标记 ， 可 以 很 直观 
地 查看 到 代码 的 编辑 情况 。 如 图 B-2 所 示 。 












































































































































图 B 一 2 


4. 查看 项 目 历史 修改 记录 
可 以 通过 log 命令 ， 来 显示 项 目的 代码 提交 记录 。 本 地 代码 提交 记录 只 含有 代码 检 出 时 指 
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定 的 版 本 区 间 的 代码 ， 所 以 当 发 现 本 地 代码 记录 可 能 不 够 用 时 ， 可 以 尝试 重新 完整 检 出 项 
在 日 志 区 域 按 住 cmd (MacOS) 或 Ctrl (Windows/Linux) 键 并 点 击 变 更 细节 的 index 部 分 ， 
可 以 使 用 左右 分 屏 对 比 的 方式 查看 文件 变更 。 
5. 合并 代码 冲突 
Studio2 有 完 智能 的 机 制 来 解决 代码 冲突 问题 。 绝 大 多 数 情况 下 ， 根 据 Studio2 的 帮助 
提示 信息 ， 即 可 解决 代码 冲突 问题 。 也 可 以 通过 “顶部 菜单 一 扩展 一 MergeConflicts 一 Detect” 
的 操作 进行 手动 检测 ， 以 解决 代码 冲突 问题 。 
B.3.4 本 地 项 目 管理 
1. 添加 本 地 项 目 
Studio2 除了 满足 APICloud App 开发 外 ， 还 可 以 作为 常规 的 文本 工具 使 用 ， 所 以 完全 可 以 
将 其 作为 日 常 开发 的 常备 工具 。Studio2 内 置 了 绝 大 多 数 编程 语言 的 话 法 文 
HTML5 开发 工具 。 














持 ， 不 仅 5 是 一 称 





2. 移 除 本 地 项 目 






































通过 在 项 目 上 右键 ， 在 3 
































三 
谋 
A 











“ 移 除 项 目 文件 夹 ” 来 进行 操作 。 如 图 B-3 所 示 。 












































并 只 到 至 二 过 民生 





六 着 本 口 村 相 





寿 忆 六 县 好 查 贡 





匡 廊 什 要 再 征 齐 苦 让 要 志 


图 B-3 
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此 处 的 移 除 ， 只 是 从 开发 工具 中 移 除 ， 并 不 会 真正 删除 项 





B.3.5 代码 编辑 


1. 语法 提示 

















输入 api .require 可 以 模糊 提示 平台 已 有 模块 ， 可 以 根 扫 





























也 可 以 根据 模块 类 型 ， 模 糊 提 示 对 应 的 模块 方法 ;使 
如 图 B-4 所 示 。 





























居 上 下 文 ， 推 断 出 变量 的 真 








实 模块 















































Tab 键 ， 可 在 





默认 参数 间作 





速 切换 。 





图 B-4 


2. 自 定义 安装 主题 与 插件 







































































下 
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Atom 揪 












































解 压 放 到 ~/.apicloud/packages/ (MacOS/Linux) 





足够 丰富 ， 但 国内 安装 可 能 会 失败 。 此 时 可 选择 3 


通过 “顶部 菜单 ~ APICloud 一 偏好 设置 ”来 进行 操作 。 











进入 插件 的 Github 主页 的 releases 区 ， 找 到 合适 版 本 的 报 
或 C:\Users\ 




















6 件 并 下 载 ， 下 二 
| 户 名 . 



















































































packages\ (Windows) 目录 中 。 使 用 cd 命令 进入 插件 
安装 完成 后 重启 Studio2 即 可 。 

















3. 格式 化 代码 































































































建议 频繁 、 大 范围 地 使 用 代码 格式 化 功能 。 











4. 使 用 Emmet 快 速 编 码 


姑 为 代码 格式 化 会 产生 许多 元 余 的 代码 记录 ， 所 以 对 于 已 经 使 














录 ， 并 执行 npm i 


aP 


后 将 其 
Tcloud\ 


F 动 安装 插件 ， 操 作 过 程 如 下 。 

















全 从: 











通过 “代码 编辑 区 域 右键 一 格式 化 代码 ”来 进行 操作 。 如 图 B-5 所 示 。 


命令 进行 








插件 3 
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Git/SVN 管理 


的 项 
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Emmet 有 其 特定 的 书写 规则 ， 更 多 详细 信息 可 登录 其 























言 网 进行 查看 ， 并 1 
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寺 守 村 二 1 
me | 
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9 布 寺 区 要 他 一 
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时 于 人 < 人们 忆 本 


SL 
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5。 使 用 AUI 快 速 布局 
AUI 是 APICloud 官方 推荐 使 用 的 CSS 框架 ， 具体 文档 可 登录 Github 查看 。 通 过 “代码 编 
辑 区 域 右键 一 插入 AUI 组 件 ” 来 进行 操作 。 如 图 B-6 所 示 。 
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B.3.6 编译 与 调试 


1.Wi-Fi 真 机 同步 























详解 





















































端口 。 如 图 B-7 所 示 。 


APIClovd 文 折 到 呈 亚 重 直 民 











装 目 已 汪 权 寻 二 二 之 全 六 着 下 人 




















需要 自行 在 











bd 


手机 上 下 载 




















Studio2 中 显示 的 IP 和 端 














2. 自 定义 Wi-Fi 调 试 端 
通过 “顶部 菜单 一 APICloud 一 偏好 设置 一 Packages 一 apicloud 2.0.0 一 Setting” 来 设置 
B-8 所 示 。 









































Wi-Fi 真 机 同步 调试 端 

















PICioud 文件 塌 闹 客 乔 查 污 天 和 代 
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。 如 
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Keybindings 


























图 B-7 























图 B-8 






































通过 “顶部 菜单 ~ 帮助 一 WIFI 真 机 同步 IP 和 端口 ”来 查看 本 开发 工具 的 调试 服务 卫 及 
































过 装 AppLoader 或 使 定义 AppLoader， 正 确 填 写 
可 通过 Wi-EFi 调试 应 
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Studio2 人 允许 同时 打 
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会 优先 使 





























定义 的 Wi-Fi 调试 端口 。 当 遇 到 端口 冲 
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突 时 ， 会 使 用 某 个 随机 端口 。 因 此 对 于 Andorid 设备 ， 建 议 使 用 Android6.0 及 以 上 版 本 的 手机 
进行 远程 调试 ， 并 需要 在 系统 设 启 USB 调试 ; 对 于 iOS 设备 ， 因 为 Apple 本 身 的 安全 
限制 ， 需 要 开发 者 上 传 自 己 的 develop 模式 证 书 ， 并 确认 系统 设置 启 了 Web 检查 器 以 便 
调试 。 
3. 云 编译 、 模 块 管理 、 编 译 自 定 义 AppLoader 
Studio2 可 直接 打开 APICloud 官网 控制 台 进 行 相关 操作 ， 这 里 的 任何 操作 都 和 网 站 控制 台 实 
时 同步 。 通 过 在 项 目 上 右键 ， 在 弹出 菜 选 提 、 “ 云 编 译 ” 等 来 操作 。 如 图 B-9 所 示 。 
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项 目 ” 代 装 攻 理 ， 二 二 全 全 


无 程 设备 调试 

































































































































































使 用 设备 远程 调试 功能 需要 一 根 可 以 用 于 数据 传输 的 USB 数据 线 。 
Android 调试 需要 在 手机 上 开启 USB 调试 功能 (设置 一 更 多 设置 一 开发 者 
手机 上 需要 安装 AppLoader 或 自 定义 AppLoader。 





iOS 调试 需要 在 



































自 Web 检查 器 ( 设 





手机 上 




































































> Safari 


> 

































































保证 安装 的 App 是 使 用 develop 证 书 编译 的 。 
具体 操作 过 程 步骤 较 多 ， 这 里 不 做 过 多 叙述 ， 发 者 可 以 登录 APICloud 网 站 参考 相关 文档 
进行 使 用 。 
5。 预览 HTML 文件 
Studio2 支持 直接 在 编码 区 域 实时 预览 HTML 页 面 效 果 。 通 过 “代码 编辑 区 域 
预览 ”进行 操作 。 预 览 效 果 如 图 B-10 所 示 。 































































































高 级 一 Web 检查 器 ) ， 





选项 一 USB 调试 )， 


同时 需要 
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ApiCloud 文件 狂 刍 坦 看 查找 项 目 代码 管理 远程 设备 扩展 官 口 帮助 
Responsve ¥ 279 x 454 100%v ; IR | Bements Console Sources Network Timeline Profles 力 基 束 


xhtml) 
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} 
htnl, body, heeder, section, footer, i 
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一 VI, dd, cite, tinput, hr, tine, mark, code, 下 


图 B-10 





目 Show al 











6. 定义 忽略 的 文件 或 目录 

Studio2 支持 在 项 目 根 目 录 中 添加 .syncignore 文件 ， 以 自 定 义 在 真 机 同步 时 需要 忽略 的 
文件 。 不 同 于 SVNVGit 等 的 .ignore 文件 方式 ，Studio2 真 机 同步 的 Ignore 功能 基于 node 一 glob 
发 ， 支 持 标准 的 Glob 表达 式 。 
























































































































































B.4 第 用 格式 示例 


e。 忽略 某 一 类 型 的 文件 ， 如 .js .map 文件 : **/*.js.map。 
e 忽略 项 所 有 某 一 名 称 的 文件 夹 及 其 子 文件 ( 夹 )， 如 node_modules 目录 : **/node_ 


E| | 
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ul 































































































如 src 目录 : src/**。 





。 忽略 根 目录 中 某 一 目录 下 的 所 有 文件 (来 ) ， 
。 基于 Webpack 等 自动 化 构建 工具 的 常用 表达 式 : {**/*.js.map,，**/node_modules/**， 


src/**}, 
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B.5 向 用 快捷 键 汇总 


。 打开 命令 输入 框 : cmd + Shift + P (MacOS) 或 ctrl + Shift + P (Windows/Linux) 。 
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。 按 文件 名 快速 查找 文件 : cmd + P (MacOS) 或 ctrl + P (Windows/Linux)。 
查看 当前 文件 定义 的 方法 : cmd + R (MacOS) 或 ctrl + R (Windows/Linux)，。 
。 文件 内 查找 : cmd + F (MacOS) 或 ctrl + F (Windows/Linux)。 
。 全 局 查找 : cmd + Shift + F (MacOS) 或 Ctrl + Shift + F (Windows/Linux)。 






































e。 刷新 视图 : Ctrl + Alt + cmd + 工 (MacOS) 或 Ctrl + Alt + R。 
。 Wi-Fi 增 量 同步 : Ctrl/cmd + I (MacOS) 或 ctrl + 工 (Windows/Linux)。 
。 插入 AUI 组件 : Ctrl + Alt + R。 



































日 脑 上 预览 页 面 : Ctrl + Shift + V。 























e 代码 格式 化 : Ctrl + Alt + B。 


B.6 和 常 见 问题 


B.6.1 如 何 将 已 有 项 目 或 源码 导 人 到 Studio2 中 


,有 项 目 或 源码 通常 分 为 3 种 : 已 经 在 APICloud 控制 台 创建 的 项 目 ， 本 地 的 项 目 源码 文件 
以 及 使 用 第 三 方 Git 托管 的 源码 。 






































































































































1. 在 APICloud 控制 台 创建 的 项 目 
解决 方法 : 

















。 打开 Studio2， 

。 选择 “顶部 菜单 一 代码 管理 一 代码 检 出 一 APICloud 云端 应 用 ” 
e。 选择 本 地 保存 位 置 ， 注 意 一 定 要 选择 一 个 空 目录 ; 

。 选择 代码 版 本 ， 回 车 确认 ， 默 认 检 出 全 部 版 本 的 代码 ; 

。 等 待 代码 检 出 完成 。 












































































































































2. 本 地 的 项 目 源码 文件 
解决 方法 : 






































。 在 APICloud 网 站 控制 台 创 建 应 用 ， 在 概览 页 查看 并 记录 其 AppId ; 

。 参考 4.1.1 小 市 步骤 ， 将 新 创建 的 App 检 出 到 计算 机 中 ; 

。 在 Studio2 项 5 键 鼠 标 ， 在 弹出 菜单 中 选择 “在 Fnder 中 显示 ”(MacOS) 或 “在 
资源 管理 器 中 显示 ”(Windows) ， 找 到 应 用 代码 的 真实 存放 位 置 ， 
。 将 本 地 的 项 目 源 码 文件 ， 拷 贝 覆 盖 到 新 检 出 的 应 用 源码 


不 
e 将 config.xml 中 widget 市 点 的 id 属性 值 ， 蔡 换 为 第 1 步 中 所 创建 应 用 的 AppId ; 
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。 使 用 代码 管理 功能 ， 将 代码 同步 到 APICloud 云端 。 
3. 使 用 第 三 方 Git 托 管 的 源码 
解决 方法 : 








证 




















。 假设 源码 本 地 目录 为 myapp/widget/， 


e。 打开 Studio2， 选 择 “ 顶 部 菜单 一 文件 一 打开 ”; 


。 在 弹出 的 文件 选择 框 里， 选中 widget 目录 即 可 。 


B.6.2 MacOS 无 法 检 出 代码 ， 提 示 “Can't locate SVN/Core.pm ”怎么 办 
该 问题 的 产生 存在 以 下 两 种 可 能 。 





























































































































1. 未 安装 过 Xeode 或 Xeode 命令 行 开发 工具 
解决 方法 : 








TT 
























































。 在 AppStore 下 载 最 新 版 Xcode， 或 者 只 下 载 Xcode 的 命令 行 开发 工具 ， 
。 下 载 Xcode 命令 行 工 具 ， 需 要 在 Mac 自 带 终端 执行 以 下 命令 。 















































sh // 会 弹 窗 提示 ， 是 否 安装 xcode 命令 行 工 具 ， 选 择 只 安 
xcode-select --install 
// 等 待命 令 行 安装 成 功 后 ， 在 执行 下 面 的 命令 ， 以 重 置 开 发 工具 。 可 能 需要 输入 管理 员 密码 ， 即 Mac 的 开机 密码 。 


sudo xcode-select -r 























2. 已 安装 Xcode 或 Xcode 命令 行 开发 工具 
般 是 由 某 些 动态 库 链接 不 正确 引起 的 ， 可 使 用 以 下 命令 修 





























dl 


























sh 

sudo ln -s /Applications/Xcode.app/Contents/Developer/Library/Perl/5.18/darwin-thread-— 
multi-2level/SVN/ /Library/Perl/5.18/SVN 

sudo mkdir /Library/Perl/5.18/auto 

sudo ln -s /Applications/Xcode.app/Contents/Developer/Library/Perl/5.18/darwin-thread-— 
multi-2level/auto/SVN/ /Library/Per1/5.18/auto/SVN 


提示 


如 果 以 上 指令 执行 时 ， 总 是 提示 类 似 “Operation not permitted” 的 错误 ， 可 尝试 以 下 方式 。 
e 重启 电脑 ， 按 住 Command + R， 进 入 恢复 模式 ， 打 开 终 端 (Terminal )， 输 入 指令 


csrutil disable 
正常 打开 电脑 , 执行 本 问题 (1) 和 (2) 中 需要 执行 的 指令 。 
重启 按 住 Command + R， 进 入 恢复 模式 ， 打 开 终 端 (Terminal )， 输 入 指令 


csrutil enable 
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B.6.3 Windows 无 法 检 出 代码 ， 提 示 “ 'git' could not be spawned” 
如 何 处 理 


































































































































































































解决 方法 : 

。 在 Windows 自 带 命令 行 ， 输 入 git 命令 ， 如 反应 ， 重 启 Studio2 即 可 解决 ; 

。 如 果 已 经 安装 过 Git， 请 先 卸 载 ; 

。 重启 Studio2， 如 果 有 提示 安装 Git， 可 以 选择 “自动 免 下 载 安装 ”(Studio2 内 置 的 是 32 
位 Git， 适 用 于 32 位 或 64 位 系统 )。 安 装 过 程 中 ， 最 好 关闭 杀毒 软件 (因为 Git 安装 时 




















需要 修改 环境 变量 ， 会 被 误 拦 截 ) ， 建 议 安装 到 C 盘 ， 

。 64 位 Windows 系统 ， 推 荐 手动 下 载 安装 64 位 版 本 的 Git， 以 提高 性 能 。Git 下 载 地 址 见 
git-scm 网 站 。 

。 极 少数 64 系统 的 用 户 ， 在 安装 64 位 Git 后 依然 报错 ， 可 尝试 升级 电脑 系统 ， 或 重新 安 
装 2.10.x 版 本 的 Git， 下 载 地 址 见 GitHub “git-for-windows” 部 分 。 





































































































B.6.4 进行 云端 操作 时 ， 提 示 “ 当 前 账户 没有 权限 访问 此 应 用 的 云 
端 数据 ， 请 切换 账号 后 重 试 ! ”怎么 办 


。 请 确保 项 目 源码 config.xml 中 的 id 和 此 应 用 在 APICloud 网 站 控制 台 概 览 中 显示 的 
apPId 一 致 ，; 

。 如 果 计 算 机 曾经 登录 过 其 他 账户 ， 可 尝试 退出 后 重新 登录 ，; 

。 如 果 是 代码 管理 相关 的 操作 有 问题 ， 可 尝试 在 重新 登录 后 ， 重 新 检 出 此 应 用 来 重建 部 
分 代码 管理 的 SVN/Git 权限 认证 信息 ; 新 检 出 的 应 用 ， 在 重建 SVN/Git 认证 信息 后 ， 
可 直接 删除 ， 继 续 用 原来 检 出 的 项 目 管理 代码 。 











































































































































































































































































































































































































B.6.5 Wi-Fi 同 步 ， 手 机 和 计算 机 无 法 连接 ， 为 什么 


。 检查 系统 防火 墙 ， 是 否 禁 用 了 Studio2 的 网 络 连 接 ， 

。 检查 手机 和 计算 机 ， 是 否 连 接 在 同一 个 路 由 (Wi-Fi) 上 ; 

。 如 果 电 脑 上 安装 有 其 他 的 APICloud 插件 或 工具 ， 可 尝试 修改 Stuido2 的 默认 Wi-EFi 调 
试 端口 ， 修 改 完成 需要 重启 Studio2 位 置 为 “顶部 菜单 一 APICloud 一 偏好 设置 一 
packages 一 apicloud 一 设置 一 Wi-Fi 真 机 同步 调试 端 > 修改 ”。 


















































































































































































































































B.6.6 本 地 代码 时 光 机 ， 如 何 使 用 


本 地 代码 时 光 机 ， 仅 对 未 提交 到 APICloud 云端 仓库 的 代码 生效 。 在 云端 同步 时 ， 如 果 未 做 
本 地 提交 的 代码 ， 会 尝试 自动 备份 。 黑 认 最 新 的 备份 ， 总 是 在 最 上 面 ， 即 索引 为 0。 当 尝试 从 备 
















































































D0000000000000 https//yabook.org 
































296 ”附录 B 开发 工具 APICloud Studio 2 使 用 详解 




















二 
~ 
过 > 





型 


获取 代码 时 ， 可 按 以 下 操作 执行 。 















































。 假设 目 名 称 为 repoA。 在 电脑 文件 3 ， 将 repoA 复制 一 份 ， 记 为 repoCopy0。 

。 在 Studio2 中 ,选择 “顶部 菜单 ~- 文件 一 打开 ~ repoCopy0”， 此 时 可 以 看 到 左 侧 树 

状 图 新 添加 项 目 repoCopy0。 

。 将 repoCopy0 中 ， 除 .git 目录 以 外 的 文件 都 天 

。 在 Studio2 中 ， 右 键 点 击 repoCopy0 根 目录 ， 在 弹出 的 菜单 中 依次 选择 “代码 管理 一 
本 地 代码 时 光 机 一 查看 所 有 备份 一 点 击 某 个 希望 恢复 的 备份 ~ 应 用 备份 ” 即 可 。 

。 可 以 手动 对 比 repoCopy0 和 repoA 中 文件 的 差异 ， 根 据 需要 把 repoCopy0 中 的 文件 复制 
到 repoA 中 。 

。 如 果 想 尝试 在 多 个 备份 中 恢复 ， 重 复 以 上 步骤 即 可 。 
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B.6.7 如 何 检 出 指定 版 本 的 代码 
历史 版 本 代码 ， 仅 供 对 比 或 找 回 历史 代码 使 用 。 获 取 方式 如 下 : 














UD 




































































TE 
































。 在 APICloud 网 站 控制 台 代 码 管理 界面 ， 获 取 该 应 用 的 SVN 地 址 和 密码 ; 

e。 使 用 TortoiseSvn (适用 于 Windows) 或 smartSvn (适用 于 Mac) 工具 ， 检 出 代码 ， 并 查 
看 所 有 版 本 的 版 本 号 ，SVN 的 版 本 号 是 一 个 数字 ， 例 如 42，; 
Studio2 中 ， 选 择 “ 顶 部 菜单 一 代码 检 出 一 检 出 APICloud 云端 应 用 一 选中 App 一 
对 本 地 保存 位 置 一 输入 在 步骤 2 中 查看 到 的 版 本 号 ”， 回 车 确认 ， 等 待 检 出 完成 即 可 。 































































































































































































同时 






























































B.6.8 如何 下 载 完整 版 本 的 Studio2 


。 Studio2 的 安装 包 ， 分 为 基础 安装 包 ， 比 如 2.1.0 版 本 ; 更 新 补丁 包 ， 包含 补丁 包 和 基础 
包 的 全 量 包 。 

e 以 2.1.2 为 例 ，2.1.2 全 量 包 由 2.1.0 基础 包 、2.1.1 补丁 包 和 2.1.2 补丁 包 组 成 。 

。 基础 安装 包 和 全 量 包 体 积 较 大 ,一 般 在 100 MB 以 上 ， 适 合 初次 时 使 用 安装 。 补 丁 包 体 

积极 小 ， 一 般 在 100 KB 左右 ， 每 次 升级 Studio2 会 自动 检测 更 新 。 

。 基础 包 可 以 在 APICloud 官网 工具 页 面 下 载 。 

。 全 量 包 ， 可 以 在 APICloud 官网 版 本 页 面 下 载 。 




































































































































































































































































我 一 向 认为 一 本 计算 机 类 图 书 的 作者 ， 如 果 能 够 务实 地 站 在 App 设 计 者 的 角度 去 思考 问题 ， 深 入 理解 问 



































题 之 间 的 相互 天 系 ， 并 且 会 针对 程序 员 经 常 遇 到 的 关键 知识 做 通俗 易 懂 的 阐述 和 丰富 的 实例 验证 ， 那 么 他 给 















































读者 带 来 的 不 仅 是 知识 ， 还 有 良好 的 程序 员 思 维 。 希 望 本 书 的 读者 能 








多 从 中 领会 作者 的 良 苦 用 心 。 











一 一 孙 增 斌 ， 英 特 尔 在 线 业务 平台 总 监 








本 书 是 一 本 很 好 的 开发 入 门 教 程 ， 通 俗 易 懂 、 由 浅 入 深 ， 并 提供 了 丰富 的 实际 和 案例 ， 详 细 介 绍 了 如 何 






































取 相 应 的 知识 ， 它 也 将 帮助 我 们 的 开发 团队 更 好 地 开发 移动 Appl 























使 用 前 端 开 发 语言 和 丰富 的 APICloud 平 台 扩展 模块 来 跨 平 台 开发 移动 App 。 相 信 每 位 读者 都 能 从 本 书 中 汲 





一 一 J 美玲 ， 泛 亚 汽车 技术 中 心 高 级 主任 工程 师 














本 书 是 程序 员 写 给 程序 员 的 ， 其 中 充满 了 程序 员 的 风格 一 一 平实 、 纯 粹 ， 还 有 

















理性 的 乐观 。 我 与 本 书 





的 作者 从 各 自 创 业 开 始 ， 就 持 有 一 个 共同 的 理念 : App 开 发 平台 ( 乃至 操作 系统 ) 应 该 高 效 、 开 放 、 跨 平 
台 、 功 能 丰富 。 本 书 是 这 一 理念 最 为 具体 的 说 明 ， 而 APICloud 和 中 科 创 达 这 两 家 公司 ， 也 是 该 理念 的 见证 
者 。 我 会 将 本 书 推荐 给 我 的 同事 、 朋 友 、 合 作 伙 伴 和 客户 阅读 。 事 实 上 ， 人 









































APICloud 平 台 以 独 有 的 快速 App 开 发 方式 ， 将 移动 开发 中 的 软件 复 用 提升 到 一 个 新 的 高 度 ， 可 以 帮助 


























企业 在 短期 内 打造 出 满足 业务 需求 的 App， 这 一 点 我 企 实际 使 用 中 有 切身 的 体会 。 本 书 语言 平实 流畅 、 A 


























内 容 丰富 ， 是 对 APICloud 生 态 的 又 一 巨大 贡献 ， 也 是 我 们 移动 开发 人 员 的 福音 。 读 读本 书 ， 相 信 你 一 


喜欢 的 | 











一 一 刘 殿 兴 言 证 卷 信息 

















技术 中 心 高 级 副 总 裁 


APICloud 平 台 是 目前 开发 App 最 高 效 的 平台 之 一 ， 本 书 详尽 地 讲述 了 如 何 通 过 APICloud 平 台 快速 开 
发 一 款 优质 的 App， 里 面 有 大 量 的 图 文案 例 并 配合 实战 讲解 ， 通 俗 易 懂 ， 容 易 上 手 ， 非 常 适合 初学 者 学 习 。 


一 一 朱 亮 ， 春 秋 航 空运 莒 总 监 
































































































































了 ， 翻 阅 本 书 发 现 许 多 当初 期 望 的 功能 都 被 逐一 实现 ， 只 能 感慨 现在 的 APICloud| 




















当 你 有 想法 时 ， 一 定 要 用 APICloud 启 航 。 
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乍 为 最 早 一 批 APICloud 的 使 用 者 ， 还 记得 当初 机 “30 天 从 0 到 1”， 这 句 话 并 没有 吹牛 ， 
我 们 用 APICloud 很 快 就 完成 了 “ 战 旗 ” 的 开发 ， 并 且 经 受 住 了 百 万 日 














活用 户 的 挑战 。 我 已 经 好 久 不 写 代码 











户 太 幸福 了 。 请 记 住 ， 














一 一 潘 长 烛 ， 








全 民 直 播 CEO 
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